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全 国 优秀 畅销 书 
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额外 配备 如 下 海量 开发 资源 库 : 

实例 资源 库 (951 个 实例 ) 吕 技术 资源 库 (700 技 术 资 源 ) 串 界 
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内 容 简 介 


《HTML 5 从 入 门 到 精通 》 系 统 、 全 面 地 讲解 了 HTML 语言 及 其 最 新 版 本 HTML 5 的 新 功能 与 新 特性 ， 技 术 新 颖 


实用 。 书 中 所 有 知识 点 均 结 合 实例 进行 讲解 ， 方 便 读 者 动手 实践 。 同 时 在 每 章 的 最 后 还 设置 了 习题 ， 


对 本 章 学 到 的 知识 进行 巩固 。 本 书 不 仅 能 够 使 读者 系统 而 全 面 地 学 习 理论 知识 ， 还 能 满足 读者 充分 实践 的 需求 。 


通过 这 些 习题 可 以 


全 书 共 分 23 章 ， 包 括 HTML 基础 、HTML 文件 基本 标记 、 设 计 网 页 文本 内 容 、 使 用 列表 、 超 链接 、 使 用 图 像 、 表 
格 的 应 用 、 层 标记 一 一 div、 编 辑 表单 、 多 媒体 页 面 、HTML 5 的 新 特性 、HTML 5 与 HTML 4 的 区 别 、HTML 5 的 结构 、 
HTML 5 中 的 表单 、HTML 5 中 的 文件 与 拖 放 、 多 媒体 播放 、 绘 制图 形 、 数 据 存储 、 离 线 应 用 程序 、 使 用 Web Worker 
处 理 线程 、 通 信 API、 获 取 地 理 位 置信 息 、 旅 游 信 息 网 前 台 页 面 。 书 中 所 有 知识 点 都 结合 具体 实例 进行 介绍 ， 涉 及 的 程 


序 代 码 给 出 了 详细 的 注释 ， 可 以 使 读者 轻松 领会 HTML 语言 程序 开发 的 精髓 ， 快 速 提高 开发 技能 。 另 外 ， 本 书 除 了 纸 
质 内 容 之 外 ， 配 书 光盘 中 还 给 出 了 海量 开发 资源 库 ， 主 要 内 容 如 下 : 

语音 视频 讲解 : 总 时 长 13 小 时 ， 共 76 段 技术 资源 库 : 700 个 标签 、 代 码 、 术 语 

回 界面 资源 库 : 539 个 按钮 示 和 颜色 代码 面试 资源 库 : 369 道 面试 题目 

能 力 测试 题库 : 138 道 测试 题目 回 PPT 电子 教案 


本 书 适 合作 为 软件 开发 入 门 者 的 自学 用 书 ， 也 适合 作为 高 等 院 校 相 关 专 业 的 教学 参考 书 ， 也 可 供 天 
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如 何 使 用 本 书 开 发 资源 库 


在 学 习 《HTML 5 从 入 门 到 精通 》 一 书 时 ， 配 合 随 书 光盘 提供 了 “Java Web 开发 资源 库 ” 系 统 ， 
可 以 帮助 读者 快速 提升 编程 水 平和 解决 实际 问题 的 能 力 。《HTML 5 从 入 门 到 精通 》 和 Java Web 开发 
资源 库 配合 学 习 流 程 如 图 1 所 示 。 


HTML 5 从 入 门 到 
精通 
图 1 从 入 门 到 精通 与 开发 资源 库 配合 学 习 流 程 图 


打开 光盘 的 “Java Web 开发 资源 库 ” 文 件 夹 , 运行 Java Web 开发 资源 库 .exe 程序 即 可 进入 “Java 
Web 开发 资源 库 ” 系 统 ， 主 界面 如 图 2 所 示 。 


了 


件 
技术 资源 库 界面 资源 库 面试 资源 库 


标题 字体 ， 一 对 <H#> 标 2 表明 正文 中 的 先 一 屋 标 题 。 标 省 一 
字 的 普 加 ， 标 题字 休 依 次 减 小 且 自 动 显示 为 轧 林 宇和 ' 


1) 一 级 标题 <H1> 是 HTML 文档 中 最 重要 的 标题， 一 般 将 其 人 
2) 二 级 标题 <H2> 通 常用 标注 文档 中 的 章 。! | 
3) 三 级 标题 <H3> 通常 用 交 标 注 每 一 章 内 部 估 节 。 

4) 四 级 标题 <H4> 通 常用 元 标注 文档 的 小 节 。! . 
5) 于 级 标题 <H5> 和 六 级 标题 <HE> 可 以 分 别 入 来 在 <H4> 内 | 
和 <H6> 通 常 合用 很 小 的 字体 显 示 ， 因 此 这 两 个 标记 并 不 常用 
标题 字体 用 到 的 属 生 是 “ALIGN"， 斥 来 控 由 | 标题 文字 的 水 平 对 
Left《 居 左 对 齐 )、3ight〈 圣 右 对 开 )、 Center (居中 对 刘 )。 


测试 题库 系统 面试 资源 库 


图 2 Java Web 开发 资源 库 主 界面 


在 《HTML 5 从 入 门 到 精通 》 学 习 过 程 中 ， 可 以 选择 技术 资源 库 和 界面 资源 库 的 相应 内 容 ， 全 面 
提升 个 人 综合 编程 技能 和 解决 实际 开发 问题 的 能 力 ， 为 成 为 Web 软件 开发 工程 师 打 下 坚实 基础 。 具 体 


HTML 5 从 入 门 到 精通 


技术 资源 库 和 界面 资源 库 目 录 如 图 3 所 示 。 


日 久 mr 标签 速 查 手册 


上 县] ITWL 常 用 标记 解释 
半 jr 常用 标记 属性 解释 日 办 图 标 与 按钮 库 ( 一 ) 
县 | MTWL 常 用 标记 事件 解释 
日 移 | HITWL 常用 代码 速 查 
恒 ] 文档 基础 代码 速 查 x16 (你 素 ) 的 图 标 
装 | 交 本 风格 类 型 代码 巡查 x24 (你 素 ) 的 图 标 
装 | 内 容 文本 类 型 代码 过 查 x32 (你 素 ) 的 图 标 
文档 空间 类 型 代码 速 查 x46 ( 悍 素 ) 的 图 标 
县 | 表格 类 型 代码 速 查 X64 (像素 ) 的 图 标 
终 | 列表 类 型 代码 速 查 x72 ( 层 素 ) 的 图 标 
图 | 图 你 类 型 代码 速 查 x96 (像素 ) 的 图 标 
站 | 链接 类 型 代码 速 查 nore 图 标 
周 表单 类 型 代码 速 查 司 小 于 11x 
闻 多 媒体 元 来 类 型 代码 这 可 小 于 11 X11 (像素 ) 的 图 标 
人 的 光 直 界面 设计 颜色 例 库 
可 入 JITIL 过 常见 状态 代码 异 面 设计 总 色 蒜 合 图 
Ee 二 司 | 颜色 代码 简 集 
己 ] NTTF 状态 代码 错误 信息 ll 
图 | Pre 状态 代码 错误 信息 马 英文 代码 颜色 全 集 


图 3 技术 资源 库 和 界面 资源 库 目录 


于 数学 逻辑 能 力 和 英语 基础 较为 薄弱 的 读者 ， 或 者 想 了 解 个 人 数学 逻辑 思维 能 力 和 编程 英语 基 
础 的 用 户 ， 本 书 提 供 了 数学 及 罗 辑 思维 能 力 测 试 和 编程 英语 能 力 测试 供 练习 和 测试 ， 如 图 4 所 示 。 


滨 


日 -项 数学 及 逻辑 思维 能 力 测试 
本 测试 


般 进 阶 测试 

半 高 级 测试 

口 - 般 面 坛 能 力 测试 
试 测 试 
由 入 编程 英语 能 办 测试 


图 4 数学 及 逻辑 思维 能 力 测试 和 编程 英语 能 力 测试 目录 
万 事 俱 备 ， 该 到 软件 开发 的 主 战场 上 接受 洗礼 了 。 面 试 资源 库 提供 了 大 量 国内 外 软件 企业 的 常见 


试 真题 ， 同 时 还 提供 了 程序 员 职 业 规划 、 程 序 员 面试 技巧 、 虚 拟 面 试 系统 等 精彩 内 容 ， 是 程序 员 求 
职 面试 的 绝 佳 指南 。 面 试 资源 库 的 具体 内 容 如 图 5 所 示 。 


革职 场 人 生 

第 ! 部 分 程序 员 职业 规划 
贡 第 部 分 程序 员 面试 技巧 
由 隧 第 5 部 分 ”虚拟 面试 系统 
由 -入 编程 人 生 


图 5 面试 资源 库 具体 内 容 


如 果 您 在 使 用 本 书 开 发 资源 库 时 遇 到 问题 ， 可 加 我 们 的 QQ: 4006751066( 可 容纳 10 万 人 ) ， 我 
们 将 竭诚 为 您 服务 。 
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众 书 说 明 : “软件 开发 视频 大 讲堂 ” (第 1 版 ) 于 2008 年 8 月 出 版 以 来 ， 因 其 编写 细腻 ,易学 
实用 ， 配 备 全 程 视频 等 ， 在 软件 开发 类 图 书市 场 上 产生 了 很 大 反响 ， 绝 大 部 分 品种 在 全 国 软件 开发 零 
售 图 书 排行 榜 中 名 列 前 芒 ，2009 年 多 个 品种 被 评 为 “全 国 优秀 畅销 书 ”. 

“软件 开发 视频 大 讲堂 ”丛书 (第 2 版 ) 于 2010 年 8 月 出 版 ， 自 出 版 至 今 ， 绝 大 部 分 品种 在 全 
国 软件 开发 类 零售 图 书 排行 榜 中 ， 依 然 持 续 名 列 前 荐 。 丛书 迄今 累计 已 销售 近 40 万 册 ， 被 百 余 所 高 校 
计算 机 相关 专业 、 软 件 学 院 选 为 教学 参考 书 ， 在 众多 的 软件 开发 类 图 书 中 成 为 一 支 最 耀眼 的 品牌 。 

“软件 开发 视频 大 讲堂 ”丛书 (第 3 版 ) 在 前 两 版 的 基础 上 ， 增 删 了 品种 ， 修 正 了 疏漏 ， 重 新 录 
制 了 视频 ， 提 供 了 从 入 门 学 习 ， 到 实例 应 用 ， 到 模块 开发 ， 到 项 目 开发 ， 到 能 力 测试 ， 直 到 面试 等 各 
个 阶段 的 海量 开发 资源 库 . 为 了 方便 教学 ， 还 提供 了 教学 课件 PPT. 

自从 2010 年 HTML 5 正式 推出 以 来 ， 它 立刻 受到 了 世界 各 大 浏览 器 的 热烈 欢迎 与 支持 。 根 据 世 界 
各 大 IT 界 知名 媒体 评论 的 说 法 ， 新 的 Web 时 代 一 一 HTML 5 的 时 代 马 上 就 要 到 来 。 


本 书 内 容 


本 书 中 所 讲 的 HTML 4 中 的 内 容 , 能 够 在 所 有 浏览 器 中 运行 。 在 讲解 HTML 5 中 新 增加 的 内 容 时 ， 
于 新 增加 的 内 容 所 支持 的 浏览 器 不 同 ， 所 以 在 运行 时 所 用 的 浏览 器 也 不 同 。 读 者 在 具体 运行 实例 时 ， 
请 使 用 其 所 支持 的 浏览 器 运行 ， 这 样 才能 保证 实例 的 运行 效果 。 

本 书 提供 了 从 HTML 到 HTML 5 的 所 有 知识 ， 共 分 3 篇 ， 大 体 结 构 如 下 图 所 示 。 

第 1 篇, HTML 基础 。 本 篇 主要 是 对 HTML 基础 、 标 记 、 列 表 、 超 链接 、 图 像 与 表格 、 层 标签 以 
及 表单 与 多 媒体 页 面 等 内 容 的 介绍 ， 并 结合 大 量 的 图 示 、 实 例 、 录 像 等 ， 使 读者 快速 掌握 HTML 的 基 
础 知识 ， 并 为 以 后 深入 学 习 HTML 5 奠定 坚实 的 基础 。 

第 2 篇 , HTML 5 高 级 应 用 。 本 篇 对 HTML 5 中 新 增 的 语法 与 标记 方法 、 新 增 元 素 、 新 增 API 以 
及 这 些 元 素 与 API 目前 为 止 受到 了 哪些 浏览 器 的 支持 等 进行 了 详细 的 介绍 。 在 对 它们 进行 介绍 的 同时 ， 
将 其 与 HTML 4 中 的 各 种 元 素 与 功能 进行 了 对 比 ， 以 帮助 读者 更 好 地 理解 为 什么 要 使 用 HTML 5、 使 
日 HTML 5 的 好 处 。 

第 3 篇 : HTML 5 项 目 实战 。 本 篇 详细 讲解 如 何在 一 个 用 HTML 5 语言 编写 而 成 的 页 面 中 综合 运 
HTML 5 中 新 增 的 各 种 结构 元 素 ， 如 何 对 这 些 结构 元 素 综合 使 用 CSS 样式 。 


HTML 5 从 入 门 到 精通 


第 11 章 HTML 5 的 新 特性 


第 12 章 HTML 5 与 HTML 4 
的 区 别 


第 13 章 HTML 5 的 结构 


第 1 章 HTML 基 础 


第 2 章 HTML 文 件 基本 标记 


第 14 章 HTML 5 中 的 表单 
第 15 章 HTML 5 中 的 文件 与 
拖 放 


第 3 章 设计 网 页 文本 内 容 


第 4 章 使 用 列表 


第 16 章 多 媒体 播放 


| | 第 5 章 超 链接 | 
[| HTML 5 高 级 | 
[EM 4 荐 可 到 第 17 章 给 制图 形 


第 6 章 使 用 图 像 
容 精 炼 、 最 流行 、 最 
学 习 压力 小 、 第 7 章 表格 的 应 用 实用 的 技术 机 


成 果 显 著 SS SS 
第 8 章 层 标记 一 一 div 第 19 章 离线 应 用 程序 


第 20 章 使 用 Web Worker 处 
第 9 章 编辑 表单 理 线程 


\ 


第 10 章 多 媒体 页 面 第 21 章 通信 API 


第 22 章 获取 地 理 位 置信 息 


HTML 5 项 目 
实战 


最 新 技术 的 综合 应 月 


第 23 章 旅游 信息 网 前 台 页 面 


本 书 特点 


口 


口 


技术 新 颖 ， 讲 解 细致 : 全面、 细致 地 展示 HTML 的 基础 知识 ， 同 时 讲解 在 未 来 Web 时 代 ] 
受 欢迎 的 HTML 5 的 新 知识 ， 让 读者 能 够 真正 学 习 到 HTML 5 最 实用 、 最 流行 的 技术 。 


h 备 


语音 视频 ， 讲 解 详尽 ， 书 中 每 一 章节 均 提供 声 图 并 茂 的 语音 教学 录像 ， 读 者 可 以 根据 书 中 提 
供 的 录像 位 置 ， 在 光盘 中 找到 。 这 些 录像 能 够 引导 初学 者 快速 入 门 ， 感 受 编程 的 快乐 和 成 就 


感 ， 增 强 进一步 学 习 的 信心 ， 从 而 快速 成 为 编程 高 手 。 


实例 典型 ， 轻 松 易 学 : 通过 例子 学 习 是 最 好 的 学 习 方 式 ， 本 书 通 过 一 个 知识 点 、 一 个 例子 、 


一 个 结果 、 一 段 评析 、 一 个 综合 应 用 的 模式 ， 透彻 详尽 地 讲述 了 实际 开发 中 所 需 的 各 类 知 


识 。 


精彩 栏目 ， 贴 心 提醒 : 本 书 根据 需要 在 各 章 使 用 了 很 多 “注意 ”“ 说 明 ” 等 小 栏目 ， 让 读者 


可 以 在 学 习 过 程 中 更 轻松 地 理解 相关 知识 点 及 概念 ， 并 轻松 地 掌握 个 别 技术 的 应 用 技巧 。 


应 用 实践 ， 随 时 练习 ， 书 中 几乎 每 章 都 提供 了 “习题 ” 让 读者 能 够 通过 对 问题 的 解答 重新 匠 


顾 、 熟 悉 所 学 的 知识 ， 举 一 反 三 ， 为 进一步 学 习作 好 充分 的 准备 。 


读者 对 象 


加 初学 编程 的 自学 者 回 编程 爱好 者 


前 


中 


大 中 专 院 校 的 老师 和 学 生 回 相关 培训 机 构 的 老师 和 学 员 


回 进行 毕业 设计 的 学 生 初 、 中 级 程序 开发 人 员 
回 程序 测试 及 维护 人 员 参加 实习 的 “菜鸟 ”程序 员 
读者 服务 


为 了 方便 解决 本 书 疑 难 问题 ， 读 者 朋友 可 加 我 们 的 QQ: 4006751066〈 可 容纳 10 万 人 ) ， 也 可 以 
登录 www.mingribook.com 留言 ， 我 们 将 竭诚 为 您 服务 。 


致 读者 


本 书 由 明日 科技 Web 程序 开发 团队 组 织 编写 ， 主 要 编写 人 员 有 刘 志 铬 、 李 慧 、 刘 欣 、 王 小 科 、 赵 
会 东 、 顾 彦 玲 、 刘 玲玲 、 赛 奎 春 、 高 春 攀 、 杨 丽 、 王 国 辉 、 陈 丹 丹 、 李 伟 、 曹 飞 飞 、 朱 晓 、 潘 凯 华 、 
李 继 业 、 完 长 梅 、 陈 英 、 刘 莉莉 、 刘 淇 、 王 双 、 黎 秋 芬 、 陈 媛 、 高 飞 、 张 金辉 、 邹 淑芳 、 高 悦 、 高 茹 、 
王 敬 洁 、 李 贺 、 李 浩然 、 郭 锐 、 郭 铁 、 郝 洪 斌 、 张 世 辉 、 李 严 、 苗 春 义 、 刘 清 怀 、 张 领 、 赵 永 发 等 。 
在 编写 过 程 中 ， 我 们 以 科学 、 严 谨 的 态度 ， 力 求 精益 求 精 ， 但 错误 、 朴 漏 之 处 在 所 难免 ， 人 敬 请 广大 读 
者 批评 指正 。 

最 后 ， 感 谢 您 选择 本 书 ， 希 望 本 书 能 成 为 您 学 习 编程 路 上 的 领航 者 。 

“ 零 门 槛 ”编程 ， 一 切 省 有 可 能 。 祝 读书 快乐 ! 


第 1 篇 “HTML 基础 


第 1 章 HTML 基础 3 
网 4 教学 录像 ，22 分 钟 
1.1 HTML 的 基本 概念 .ss 4 


1.2 HTML 发 展 史 
1.3 HTML 的 基本 结构 
1.3.1 HTML 文件 的 编写 方法 .. 
1.3.2 文件 开始 标签 <html> 
1.3.3 ”文件 头 部 标签 <head>. 
1.3.4 ”文件 标题 标签 <title>.… 
1.3.5 文件 主体 标签 <body> 
1.3.6 ”编写 文件 的 注意 事项 
1.4 编写 第 一 个 HTML 文件 
1.4.1 HTML 文件 的 编写 方法 .. 
1.4.2 手工 编写 页 面 …………… 
1.4.3 ”使 用 可 视 化 软件 制作 页 面 …… 
1.4.4 使 用 浏览 器 浏览 HTML 文件 .. 
1.4.5 使 用 HTML 开发 的 明日 图 书 网 .. 
下 


和 16 

第 2 章 HTML 文件 基本 标记 17 
驶 4 教学 录像 ，44 分钟 

2.1 HTML 头 部 标记 .eccoicccccnccccceee 18 


2.2 ”标题 标记 <title> 
2.3 元 信息 标记 <meta> 
2.3.1 设置 页 面 关键 字 
2.3.2 ”设置 页 面 描述 .… 
2.3.3 ”设置 编辑 工具 
2.3.4” 设 定 作 者 信息 


2.3.5 ”限制 搜索 方式 ssc 22 
2.3.6 设置 网 页 文字 及 语言 
2.3.7 设置 网 页 的 定时 跳 转 … 
2.3.8 ” 设 定 有 效 期 限 
2.3.9 禁止 从 缓存 中 调用 
2.3.10 ”删除 过 期 的 cookie. 
2.3.11 强制 打开 新 窗口 … 
2.3.12 ”设置 网 页 的 过 渡 效 果 . 
2.4 基底 网 址 标记 <base> 
2.5 页 面 的 主体 标记 <body>.. 
2.5.1 设置 文字 颜色 一 一 text .… 
2.5.2 ”背景 颜色 属性 一 一 bgcolor 
2.5.3 背景 图 像 属 性 一 一 background.. 
2.5.4 ”设置 链接 文字 属性 一 一 link .. 
2.5.5 设置 边 距 一 一 margin 
2.6 页 面 的 注释 标记 .. 
2.7 ”实例 演练 一 一 创建 基本 的 HTML 网 页 .38 
2.8 小 结 ,… 


2.9 习题 .… 

第 3 章 设计 网 页 文本 内 容 .66 41 
学 录像 : 29 

41 亲 题 交 企 前半 部 nani 42 


3.1.1 标题 文字 标记 <h> 
3.1.2 ”标题 文字 的 对 齐 方式 一 一 align 
3.2 设置 文字 格式 
3.2.1 设置 文字 字体 一 一 face. 
3.2.2 设置 字号 一 一 size..… 六 
3.2.3 ”设置 文字 颜色 一 一 color .5 46 


HTML 5 从 入 门 到 精通 


3.2.4 粗 体 、 斜 体 、 下 划 线 一 一 strong、em、u.… 46 
3.2.5 上 标 与 下 标 
3.2.6 ”设置 删除 线 一 一 strike 
3.2.7 “等 宽 文字 标记 一 一 code .… 
3.2.8 
3.2.9 
3.3 设置 段落 格式 . 
3.3.1 段落 标记 一 一 p. 
3.3.2 ”取消 文字 换行 标记 一 一 nob 
3.3.3 ”换行 标记 一 一 br .……… i 
3.3.4 保留 原始 排版 方式 标记 一 一 pre.. 
3.3.5 居中 对 齐 标记 一 一 center … 
3.3.6 向 右 缩 进 标记 一 一 blockquote . 
3.4 水 平 线 标记 
3.4.1 添加 水 平 线 一 一 hr . 
3.4.2 设置 水 平 线 的 宽度 与 高 度 
一 一 width、height 
3.4.3 设置 水 平 线 的 颜色 一 一 colo 
3.4.4 设置 水 平 线 的 对 齐 方式 一 一 align 
3.4.5 ”去掉 水 平 线 阴影 一 一 noshade.…… 
3.5 其 他 文字 标记 
3.5.1 文字 标注 标记 一 一 rub a 
3.52” 声 明 变 量 标 记 一 Yassoncssinsssoonsosannosicinin G1 
3.5.3 忽视 HTML 标记 


——plaintext、xmp 


SUP、 SUb 47 


3.6 
Be 63 
第 4 章 ， 使 用 列表 .se 65 
全 教学 录像 :35 分钟 
水 1 列表 的 灶 记 Lasisaasssaaaaaaaaaaaa 


4.2 使 用 无 序列 表 
4.2.1 无 序列 表 标记 一 一 ul. 
4.2.2 无 序列 表 的 符号 类 型 一 一 type 

4.3 使 用 有 序列 表 
4.3.1 有 序列 表 标 记 一 一 ol 
4.3.2 ”有 序列 表 的 属性 一 一 fyp 
4.3.3 有 序列 表 的 起 始 数 值 一 一 start 


VII 


4.4 ”定义 列表 标记 一 一 dl 
4.5 菜单 列表 标记 一 一 menu . 
4.6 目录 列表 一 一 dir.. 
4.7 使 用 谈 套 列表 .….. 
4.7.1 ”定义 列表 的 嵌 套 
4.7.2 无 序列 表 和 有 序列 表 的 典 套 
4.8 小结... 
4.9 习题 .… 


第 5 章 超 链接 


学 22 


$l 
5.1.1 
5.1.2 ”绝对 路 径 
5.1.3 ”相对 路 径 
5.2 ” 超 链 接 的 建立 
5.2.1 超 链接 标记 的 基本 语法 
5.2.2 ”建立 文本 超 链接 
5.2.3 ”设置 超 链接 的 目标 窗口 


5.4.1 建立 书签 
5.4.2 ”链接 到 同一 页 面 的 书签 … 
5.4.3 ”链接 到 不 同 页 面 的 书签 .… 
5.5 ”外 部 链接 


5.5.3 发送 E-mail. 
5.5.4 下 载 文件 … 
5.6 其 他 链接 .. 


全 教学 录像 : 35 分 钟 
G1 图 像 的 基本 格式 ass 全 102 


6.2 添加 图 像 一 一 img 

6.3 设置 图 像 属性 … 
6.3.1 图 像 高 度 一 一 height..… 
6.3.2 ”图 像 宽度 一 一 width.… 

6.3.3 ”图 像 边 框 一 一 border .…… 


6.3.4 ”图 像 水 平 间距 一 一 hspac 
6.3.5 ”图像 垂 直 间距 一 一 vspace… 
6.3.6 图像 相 对 于 文字 基准 线 的 对 齐 方式 
| end tains ON 
6.3.7 ”图像 的 提示 文字 一 一 alt.. 
6.4 图像 的 超 链接 
6.4.1 设置 图 像 的 超 链接 . 
6.4.2 设置 图 像 热 区 链接 . 


第 7 章 表格 的 应 用 . 

名 4 教学 录像 ，48 分 钟 
7.1 创建 表格 . 
7.1.1 表格 的 基本 构成 一 一 table、tr、t 
7.1.2 ”表格 的 标题 一 一 caption .. 
7.1.3 表格 的 表 头 一 一 也 
7.2 设置 表格 基本 属性 … 
7.2.1 表格 的 宽度 一 一 width 
7.2.2 表格 的 高 度 一 一 height.… 
7.2.3 ”表格 的 对 齐 方 式 一 一 align.… 
7.3 ”设置 表格 的 边框 
7.3.1 表格 边框 的 宽度 一 一 border. 
7.3.2 ”表格 边框 的 颜色 一 一 bordercolor a 
7.3.3 ”表格 内 框 的 宽度 一 一 cellspacing.……130 


7.3.4 表格 内 文字 与 边框 的 间距 
一 一 cellpadding . 


7.4 设置 表格 背景 … 
7.4.1 表格 的 背景 颜色 一 一 bgcolor.…… 
7.4.2 表格 的 背景 图 像 一 一 background 

7.5 设置 表格 的 行 属性 ..…. 
7.5.1 高 度 的 控制 一 一 height 
7.5.2 行 的 边框 颜色 一 一 bordercolor 


7.5.3 行 的 背景 颜色 一 一 bgcolor、background..…. 136 
7.5.4 行文 字 的 水 平 对 齐 方式 一 一 align .…………… 137 
7.5.5 行文 字 的 垂直 对 齐 方式 一 一 valign 
7.5.6 ”表格 标题 的 垂直 对 齐 方式 一 align … 
7.6 调整 单元 格 属性 
7.6.1 单元 格 大 小 一 一 width、height. 
7.6.2 单元 格 水 平 跨 度 一 一 colspan.… 
7.6.3 ”单元 格 垂直 跨度 一 一 rowspan 
7.6.4 单元 格 对 齐 方式 一 一 align、valign. 
7.6.5 单元 格 的 背景 色 
7.6.6 单元 格 的 边框 颜色 一 一 bordercolor.. 
7.6.7 ”单元 格 的 亮 边 框 一 bordercolorlight..…. 
7.6.8 ”单元 格 的 暗 边 框 一 一 bordercolordark.… 


7.7.1 表格 的 表 头 标记 一 一 thead.… 
7.7.2 表格 的 表 主 体 标记 一 一 tbody 
7.7.3 ”表格 的 表 尾 标记 一 一 tfoot. 


7.8 表格 的 说 套 

7.9 小 结 
FIO HM 
第 8 童 层 标记 一 div..666s6s6oo6sssosoooonss 161 

台 4 教学 录像 ，33 分 钟 

8.1 

8.1.1 层 的 分 类 

8.1.2 ”定义 数据 块 . 


8.2” ”<div> 标签 . 
8.2.1 <div> 标 签 的 简介 . 
8.2.2 ”<div> 标 签 的 属性 
8.2.3 ”<span> 标 签 与 <div> 标 签 . 

8.3 ”<iframe> 标 签 
8.3.1 <iframe> 标 签 的 简介 
8.3.2 ”<iframe> 标 签 的 属性 

8.4 ”<layer> 标 签 和 <ilayer> 标 签 
8.4.1 标签 层 的 使 用 
8.4.2 ”<layer> 标 答 和 <ilayer> 标 签 的 区 别 

8.5 应 用 div 制作 下 拉 菜 单 导 航 条 .… 


HTML 5 从 入 门 到 精通 


8.6 小 结 ... .179 
8.7 习题 ... .179 
第 9 章 编辑 表单 

学 

9.1 使 用 表单 标签 一 一 form.. 

9.1.1 ”处理 动 作 一 一 action.… 

9.1.2 表单 名 称 一 一 name 

9.1.3 ”传送 方法 一 一 method.. 

9.1.4 ”编码 方式 一 一 enctype . 

9.1.5 目标 显示 方式 一 一 target. 


9.6 


9.3.1 
9.3.2 
9.3.3 
9.3.4 
9.3.5 
9.3.6 
9.3.7 
9.3.8 
9.3.9 


9.3.10 文件 域 一 file. 
9.4 列表 /菜单 标记 
9.5 文本 域 标记 一 一 textarea. 
id 标记 


文字 字段 一 一 text 
密码 域 一 一 password 


单 选 按钮 一 一 radio.. 

复 选 框 一 一 checkbox .es 
普通 按钮 一 一 button..… 

提交 按钮 一 一 submit.… 

重 置 按钮 一 一 reset.. 

图 像 域 一 一 image.… 
隐藏 域 一 一 hidde 


第 11 章 HTML 5 的 新 特性 .7 221 


11.2 HTML 5 的 新 认识 
11.2.1 
11.2.2 ”实用 性 和 用 户 优先 
11.2.3 ”化 繁 为 简 .… 
11.3 无 插件 范式 


兼容 性 .. 


11.4 HTML 5 的 新 特性 .eee 224 


Xx 


9.7 小 结 . 
9.8 习题 . 
第 10 章 多 媒体 页 面 
10.1 设置 滚动 文字 
10.1.1 滚动 文字 标签 一 一 marquee. 
10.1.2 ”滚动 方向 属性 一 一 direction 
10.1.3 ”滚动 方式 属性 一 一 behavior 
10.1.4 滚动 速度 属性 一 一 scrollamoun 
10.1.5 滚动 延迟 属性 一 一 scrolldelay.. 
10.1.6 滚动 循环 属性 一 一 loop …… 
10.1.7 滚动 范围 属性 一 一 width、height 
10.1.8 滚动 背景 颜色 属性 一 一 bgcolor … 
10.1.9 滚动 空间 属性 一 一 hspace、vspace.. 
102 二 类 将 采 音 所。 aaa aaaaaa 
10.2.1 设置 背景 音乐 一 一 bgsound .eeseesses 211 
10.2.2 设置 循环 播放 次 数 一 一 loop 


10.3 添加 多 媒体 文件 


10.3.1 
10.3.2 
10.3.3 
10.3.4 
10.3.5 
10.4 


第 12 章 


12.1 
12.1.1 
12.1.2 
12.13 
12.1.4 


12.2 ”新 增 的 元 素 和 废除 的 元 素 ................…. 


小 结 .. 
10.5 习题 ... 


语法 的 改变 


添加 多 媒体 文件 标记 一 一 embed. 
设置 自动 运行 一 一 autostart. 

设置 媒体 文件 的 循环 播放 一 一 loop 
隐藏 面板 一 一 hidden 
添加 其 他 类 型 的 媒体 文件 . 


HTML 5 与 HTML 4 的 区 别 ……… 225 


HTML 5 的 语法 变化 
HTML 5 中 的 标记 方法 
HTML 5 语法 中 的 3 个 要 点 
标签 实例 


12.2.1 新 增 的 结构 元 素 .…… 
12.2.2 新 增 的 块 级 的 语义 元 素 
12.2.3 ”新 增 的 行内 的 语义 元 素 ……………………… 
12.2.4 新 增 的 嵌入 多 媒体 元 素 与 交互 性 元 素 
12.2.5 ”新 增 的 input 元 素 的 类 型 ……………… 
12.2.6 ”废除 的 元 素 .ee 
12.3 ”新 增 的 属性 和 废除 的 属性 
12.3.1 新 增 的 属性 … 
12.3.2 ”废除 的 属性 … 
12.4 全 局 属性 
12.4.1 contentEditable 属性 .. 
12.4.2 designMode 属性 
12.4.3 ”hidden 属性 .…… 
12.4.4 spellcheck 属性 . 
12.4.5 tabindex 属性 


12.5 小结 

i 
第 13 章 HTML 5 的 结构 242 

呈 ! 视频 讲解 : 20 分 钟 

13.1 新 增 的 主体 结构 元 素 .se 243 

13.1.1 article 元 素 … 

13.1.2 section 元 素 .. 

13.1.3 nav 元 素 …. 


13.1.4 aside 元 素 . 
13.1.5 time 元 素 .. 
i131:6 
13.2 ”新 增 的 非 主体 结构 元 素 
13.2.1 header 元 素 … 
13.2.2 ”hgroup 元 素 .. 
13.2.3 footer 元 素 … 
13.2.4 address 元 素 .. 


13.3 小 结 . .253 

13.4 习题 . .254 

第 14 章 HTML 5 中 的 表单 .pp 255 
名 4 视频 讲解 ，50 分钟 

14.1 新 增 表单 元 素 与 属性 256 

14.1.1 ”新 增 的 属性 .ss .256 


14.1.2 ”增加 与 改良 的 input 元 素 的 种 类 . 
14.1.3 output 元 素 的 添加 
14.1.4 ”应 用 新 增 元 素 制作 注册 表单 
14.2 ”对 表单 的 验证 . 
14.2.1 ”自动 验证 .… 
14.2.2 ”checkValidity 显 式 验证 法 


14.2.3 ”避免 验证 
14.2.4 ”使 用 setCustomValidity 方法 自 定义 
炳 注入 籼 nnn 268 
14.3 ”增加 的 页 面 元 素 . .269 
14.3.1 新 增 的 figure 元 素 270 
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E 家 第 1 部 分 HTML 标记 国 datatransfer 
国 DocTYPE 国 da 
Ee 国 defaults 
国 acronym 国 ua 

国 address [ES dfn 

EE applet Es dir 

国 aa 国 dv 

国 attribute 国 dl 

El b 国 document 
[Es base 国 dt 

国 basefont 国 em 

国 tw 国 embed 
Es bgsound Es event 
功 big 国 external 


El blockquote 国 fieldset 


国 body 国 font 
国 rw 国 fame 
国 button 国 frameset 
[Es caption 国 from 
Es center 国 head 
El cite 国 history 
El clientinformation 国 hn 

Es clipboarddata [ES hr 

国 code 国 html 
国 col 国 i 

国 colgroup 国 iframe 
El comment 国 input 
El currentStyle 国 input type=button 


Es custom 国 input type=checkbox 


国 input type=file 
国 inputtype=hidden 
El input type=image 
国 input type=password 
国 input type=radio 
Ei input type=reset 
国 input type=submit 
国 input type=text 
国 im 

国 isindex 

国 ka 

国 taba 

ES legend 

国 1 

国 imk 

国 isting 

EE location 

[El map 

国 marquee 

Es menu 

功 meta 

El namespace 

Es navigator 

EE: nextID 

国 nobr 

[El noframes 

Es noscript 
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国 Script 
国 Select 
国 selection 
国 ma 
国 span 
国 strike 
国 strong 
国 style 
国 stylesheet 
国 sub 


El 


xmp 
E 钢 第 2 部 分 HTML 标记 属性 


国 timportant 


:active 
:first-letter 
:hover 
:link 
:Visited 
@charset 
@font-face 
@import 
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EE activeelement 
国 align 

国 atink 

ES alinkcolor 

[El allowtransparency 
国 additive 

Es alt 

车 aarMr 

功 altkey 

国 auet 

国 appcodename 
国 application 

Es appminorversion 
Es appname 

国 appversion 

国 archive 

[ES atomicselection 
国 autocomplete 
国 availheight 

国 availwidh 

Es axis 

国 background 
国 backgroundattachment 
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国 backgroundcolor 
国 backgroundimage 
国 backgroundposition 
国 backgroundrepeat 
国 balance 

国 banner 


国 bannerabstract 
国 basehref 

国 behavior 

国 bgcolor 

国 bgproperties 
国 vlockdirection 
国 border 

国 borderbottom 
国 borderbottomcolor 
国 borderbottomstyle 
国 borderbottomwidth 
国 bordercollapse 
国 bordercolor 
国 bordercolordark 
国 bordercolorlight 
国 borderleft 

国 borderleftcolor 
国 borderleftstyle 
国 borderleftwidth 
国 borderright 

国 borderrightcolor 
国 borderrightstyle 
国 borderrightwidth 
国 borderstyle 

国 bordertop 

国 bordertopcolor 
国 bordertopstyle 
国 bordertopwidth 
国 borderwidth 
国 bottom 

国 bottom 

国 bottommargin 
国 boundingheight 
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国 boundingleft 国 colspan 


国 boundingtop 国 compact 
已 boundingwidth 国 compatmode 
国 browserlanguage 国 complete 
- bufferdepth --， content 

button contenteditable 
国 cancelbubble 国 contentoverflow 
国 canhavechildren 国 contentwindow 
El canhavehtml 国 cookie 
El caption 国 cookieenabled 


国 cellindex 国 coords 
国 cellpadding 国 count 
Es cellspacing 国 cpuclass 
国 ch 国 csstext 
国 charset 国 ctrlkey 
国 checked 国 comef 
| choff -| Cursor 
cite data 
国 classid 国 datafld 
Es classname 国 dataformatas 
[El clear 国 datapagesize 
国 ctientheight 国 datasre 
国 stienteh 国 datetime 
EE clienttop 国 declare 
国 clientwidth 国 defaultcharset 
[El clientx 国 defaultchecked 
国 clienty 国 defaultselected 


国 sip 国 defauitstatus 


Es clipbottom 国 defaultvalue 
国 sipket 国 deter 

[Es clipright 国 designmode 
[ES cliptop 国 devicexdpi 

国 closed 国 dialogarguments 
国 code 国 dialogheight 
El codebase 国 dialogleft 

[Es codetype 国 dialogtop 


[Es color 国 dialogwidth 
国 colordepth 国 dir 
国 cols 国 direction 
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国 disabled 国 height 
[Ei display 国 hidden 


国 doctype 国 hidefocus 
国 document 国 host 
[Es documentelement 国 hostname 
Ei domain 国 href 
”| dropeffect hreflang 
dynsrc hspace 
El effectallowed 国 htmlfor 


El encoding 国 htmltext 

国 enctype 国 httpequiv 
[El event 国 id 

El expando 国 imemode 

El face 国 implementation 


-- fgcolor indeterminate 
fielddelim index 

El filecreateddate 国 innerhtml 

国 filemodifieddate 国 innertext 

[El filesize 国 iscontenteditable 
国 fileupdateddate 国 isdisabled 


国 filter 国 ismap 
国 firstchild 国 ismultiline 
Es font 国 isopen 
国 fontfamily 国 istextedit 


国 fontsize 国 keycode 


El fontsmoothingenabled 国 label 

国 fontstyle 国 lang 

国 fontvariant 国 language 

国 fontweight 国 lastchid 

国 tm 国 lastmodified 
置 frame 国 layoutflow 
国 frameborder 国 layoutgrid 
[ES frameelement 国 layoutgridchar 
[Ei framespacing 国 layoutgridline 
El fromelement 国 layoutgridmode 
[Es galleryimg 国 layoutgridtype 


国 hash 国 ie 
国 haslayout 国 leftmargin 


国 headers 国 iength 
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国 letterspacing 国 nowrap 

国 tinebreak 国 ooject 

El lineheight 国 offscreenbuffering 
国 tink 国 oftsetheight 

[Es linkcolor 国 offsetleft 


El liststyle 国 offsetparent 
国 liststyleimage 国 offsettop 
国 iststyleposition 国 otfetwidth 
El liststyletype 图 offsetX 
国 logicalxdpt 国 utfety 


国 logicalydpi 国 online 
[El longdesc 国 opener 
Es loop 国 outerhtml 
国 lowsrc 国 outerText 
国 margin 国 overflow 


El marginbottom 国 overflowX 
El marginheight 国 overflowY 
国 marginleft 国 ownerdocument 
[El marginright 国 owningElement 
Es margintop 国 padding 

[El marginwidth 国 paddingbottom 
[El maxlength 国 paddingleft 
国 media 国 paddingright 
时 menuarguments 国 paddingtop 
国 method 国 pagebreakafter 
[El methods 国 pagebreakbefore 


功 minheight 国 palette 
功 moreinfo 国 parent 


Es multiple 国 parentElement 
Es name 国 parentNode 
功 nameprop 国 parentStyleSheet 
国 nextpage 国 parenttextedit 
国 nextsibling 国 parentwindow 
国 nodename 国 pathname 

国 nodetype 国 pixelbottom 
国 nodevalue 国 pixelheight 
Es nohref 国 pixelleft 


[Es noresize 国 pixelright 
国 noshade 国 Pixeltop 
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国 pixelwidth 国 ScreenX 
国 Platform 国 Screeny 


已 posheight 国 scrollamount 

国 position 国 serollbar3dlightcolor 
国 posleft 国 scrollbararrowcolor 
El posright 国 scrollbarbasecolor 
国 postop 国 scrollbardarkshadowcolor 
国 poswidth 国 scrollbarshadowcolor 
El profile 国 scrollbartrackcolor 
EE propertyname 国 scrolldelay 

国 protocol 国 scrollheight 

[El pseudoclass 国 scrolling 

El pvevioussibling 国 scrollleft 


[El qualifier 国 scrolltop 


国 Tccordset 国 scrollwidth 


EE readonly 国 Search 


EE Teadystate 国 Sectionrowindex 
[EE reason 国 Security 
国 Tecordnumber 国 selected 


ES referrer 图 selectedindex 


[El rel 国 Selector 
[El repeat 国 Selectortext 
Es returnValue 国 self 

EE: rev 国 shape 

国 right 国 shiftkey 


国 rightmargin 国 shitlef 


国 Towindex 国 size (属性 ) 到 论坛 讨论 

国 Tows 国 sourceindex (属性 ) 到 论坛 讨论 
Es rowspan 国 span (属性 ) 到 论坛 讨论 

Es rubyalign 国 specified (属性 ) 到 论坛 讨论 
[El rubyoverhang 国 src (属性 ) 到 论坛 讨论 

国 rubyposition 国 srcelement (属性 ) 到 论坛 讨论 
国 mes 国 srcfitter (属性 ) 到 论坛 讨论 
国 savetype 国 srcurm (属性 ) 到 论坛 讨论 
[ES scheme 国 standby (属性 ) 到 论坛 讨论 
[Es scope start (属性 ) 到 论坛 讨论 

国 scopename 国 status (属性 ) 到 论坛 讨论 
国 screentett 国 sle (属性 ) 到 论坛 讨论 


国 screentop 国 stylefloat (属性 ) 到 论坛 讨论 
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国 sammary (属性 ) 到 论坛 讨论 

国 systemlanguage (属性 ) 到 论坛 讨论 

国 tabindex (属性 ) 到 论坛 讨论 

已 tablelayout (属性 ) 到 论坛 讨论 

国 tabstop (属性 ) 到 论坛 讨论 

国 tagname (属性 ) 到 论坛 讨论 

国 tagum (属性 ) 到 论坛 讨论 

国 target (属性 ) 到 论坛 讨论 

国 text (属性 ) 到 论坛 讨论 

国 text (属性 ) 到 论坛 讨论 

国 textalign (属性 ) 到 论坛 讨论 

国 textalignlast (属性 ) 到 论坛 讨论 

[El textautospace (属性 ) 到 论坛 讨论 

国 textdecoration (属性 ) 到 论坛 讨论 

[El textdecorationblink (属性 ) 到 论坛 讨论 
EE textdecorationlinethrough (属性 ) 到 论坛 讨论 
[El textdecorationnone (属性 ) 到 论坛 讨论 
[Es textdecorationoverline (属性 ) 到 论坛 讨论 
[El textdecorationunderline (属性 ) 到 论坛 讨论 
国 textindent (属性 ) 到 论坛 讨论 

[El textjustify (属性 ) 到 论坛 讨论 

Es textkashidaspace (属性 ) 到 论坛 讨论 
EE textoverflow (属性 ) 到 论坛 讨论 

国 texttransform (属性 ) 到 论坛 讨论 

[El textunderlineposition (属性 ) 到 论坛 讨论 
国 ttoot( 属 性 ) 到 论坛 讨论 

国 thead (属性 ) 到 论坛 讨论 

国 tite (属性 ) 到 论坛 讨论 

[ES toelement (属性 ) 到 论坛 讨论 

国 top (属性 ) 到 论坛 讨论 

国 topmargin (属性 ) 到 论坛 讨论 

国 tespeed (属性 ) 到 论坛 讨论 

国 ype (属性 ) 到 论坛 讨论 

国 typedetail (属性 ) 到 论坛 讨论 

国 unicodebidi (属性 ) 到 论坛 讨论 

El uniqueid (属性 ) 到 论坛 讨论 

国 uits (属性 ) 到 论坛 讨论 

国 unselectable (属性 ) 到 论坛 讨论 


国 updateinterval (属性 ) 到 论坛 讨论 
国 URL (属性 ) 到 论坛 讨论 

国 URLUnencoded (属性 ) 到 论坛 讨论 
国 um (属性 ) 到 论坛 讨论 

国 useMap (属性 ) 到 论坛 讨论 

国 useragent (属性 ) 到 论坛 讨论 

国 userlanguage (属性 ) 到 论坛 讨论 
国 vatign (属性 ) 到 论坛 讨论 

国 value (属性 ) 到 论坛 讨论 
国 value (属性 ) 到 论坛 讨论 
国 vaue (属性 ) 到 论坛 讨论 
国 value (属性 ) 到 论坛 讨论 
国 value (属性 ) 到 论坛 讨论 
国 value (属性 ) 到 论坛 讨论 
国 valuetype (属性 ) 到 论坛 讨论 

国 vcard_name (属性 ) 到 论坛 讨论 
国 version (属性 ) 到 论坛 讨论 

国 verticalalign (属性 ) 到 论坛 讨论 
国 viewinheritstyle (属性 ) 到 论坛 讨论 
国 viewlink (属性 ) 到 论坛 讨论 

国 viewmastertab (属性 ) 到 论坛 讨论 
国 visibility (属性 ) 到 论坛 讨论 

国 vink (属性 ) 到 论坛 讨论 

国 vlinkcolor (属性 ) 到 论坛 讨论 

国 volume (属性 ) 到 论坛 讨论 

国 vspace (属性 ) 到 论坛 讨论 

国 wheeidelta (属性 ) 到 论坛 讨论 
国 whitespace (属性 ) 到 论坛 讨论 
国 width (属性 ) 到 论坛 讨论 

国 wordbreak (属性 ) 到 论坛 讨论 
国 wordspacing (属性 ) 到 论坛 讨论 
国 wordwrap (属性 ) 到 论坛 讨论 

国 wrap (属性 ) 到 论坛 讨论 

国 writingmode (属性 ) 到 论坛 讨论 
国 x (属性 ) 到 论坛 讨论 

国 xmldocument (属性 ) 到 论坛 讨论 
国 xmns (属性 ) 到 论坛 讨论 

国 xsldocument (属性 ) 到 论坛 讨论 


m 


国 y (属性 ) 到 论坛 讨论 
国 zindex (属性 ) 到 论坛 讨论 
国 zoom (属性 ) 到 论坛 讨论 
3] 第 3 部 分 “HTML 标记 事件 
国 onabort 

El onactivate 

国 onafterprint 

已 onafterupdate 

国 onbeforeactivate 

Es onbeforecopy 

[El onbeforecut 

Es onbeforedeactivate 

[El onbeforeeditfocus 

El onbeforepaste 

国 onbeforeprint 

El onbeforeunload 

[El onbeforeupdate 

ES onblur 

[El onbounce 

EE oncellchange 

El onchange 

[El onclick 


国 oncontextmenu 
EE oncontrolselect 


国 oncopy 
Es oncut 


功 ondataavailable 
Es ondatasetchanged 
[El ondatasetcomplete 
国 ondbiclick 

[ES ondeactivate 
[Es ondrag 

El ondragend 

国 ondragenter 

国 ondragleave 
El ondragover 

El ondragstart 


El ondrop 
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国 onerror 

国 onerrorupdate 
国 onfilterchange 
国 onfinish 

国 onfocus 

国 onfocusin 
国 onfocusout 
国 onhelp 

国 onkeydown 
国 onkeypress 
国 onkeyup 

国 onlayoutcomplete 
国 onload 

[El onlosecapture 
国 onmousedown 
国 onmouseenter 
国 onmouseleave 
国 onmousemove 
[El onmouseout 
国 onmouseover 
国 onmouseup 
国 onmousewheel 


国 onmove 

国 onmoveend 

国 onmovestart 

男 onpaste 

国 onpropertychange 
国 onreadystatechange 
国 onreset 

国 onresize 


国 onresizeend 
国 onresizestart 
国 onrowenter 
国 onrowexit 


国 onrowsdelete 
国 onrowsinserted 
国 onscroll 

国 onselect 


国 onselectionchange 

国 onselectstart 

[Es onstart 

Ei onstop 

[Es onsubmit 

国 onunload 

HTML 常用 代码 速 查 

沟 文 档 基 础 代码 速 查 
文本 风格 类 型 代码 速 查 
内 容 文 本 类 型 代码 速 查 
文档 空间 类 型 代码 速 查 
表格 类 型 代码 速 查 
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列表 类 型 代码 速 查 
图 像 类 型 代码 速 查 
链接 类 型 代码 速 查 
表单 类 型 代码 速 查 
多 媒体 元 素 类 型 代码 速 查 
框架 类 型 代码 速 查 


HTML 常用 术语 


HTML IIS 常见 状态 代码 
= HTTP 状态 代码 错误 信息 
E FTP 状态 代码 错误 信息 


界面 资源 库 


(539 个 按钮 、 图 标 和 颜色 代码 ， 光 盘 路 径 : 开发 资源 库 /界面 资源 库 ) 


E 家] 程序 员 按 甸 库 
国 保存 按 外 
国 播放 按钮 
国 查看 按 和 
国 导出 按钮 
国 导出 按 多 
国 导入 按钮 
国 导航 按 外 
国 登录 按 和 
国 发 布 按 和 
国 发 送 按钮 
国 返回 按钮 
国 购物 车 按钮 
国 关闭 按钮 
国 取消 按 旬 
国 确定 按 和 
国 删除 按 多 
国 上 传 按钮 
国 搜索 按 名 
国 添加 按钮 


国 退出 按钮 
国 修改 按钮 
国 重 置 按钮 
国 注册 按钮 
国 组 合 按钮 
国 最 大 化 按钮 
国 最 小 化 按钮 

E 钢 程序 员 图 标 库 
国 16x16( 像 素 ) 的 图 标 
国 24x24( 像 素 ) 的 图 标 
国 32x32( 像 素 ) 的 图 标 
国 48x48( 像 素 ) 的 图 标 
国 64x 64( 像 素 ) 的 图 标 
国 72x72( 像 素 ) 的 图 标 
国 96x96( 像 素 ) 的 图 标 
国 more 图 标 
国 小 于 11X11( 像 素 ) 的 图 标 

E 家 |] 看 面 设计 颜色 例 库 
国 爱 两 丝 蔓 
国 暗淡 的 灰色 


国 白 姻 

国 板 岩 暗 蓝 灰色 
国 薄荷 奶油 

国 薄 雾 玫瑰 

国 苍白 的 绿 宝石 
国 苍白 的 绿色 

国 苍白 的 紫罗兰 红色 
国 草坪 绿 

国 坦 特 酒 绿 

国 埠 红 色 

国 栓 色 

国 春天 的 绿色 

国 纯 白 

国 纯 黑 

国 纯 红 

国 纯 黄 

国 纯 蓝 

国 纯 绿 

国 淡 钢 蓝 

国 淡 蓝 

国 痰 绿色 

国 痰 青色 

国 淡 珊 瑚 色 

国 淡 天 蓝 色 

国 道奇 蓝 

国 灯笼 海棠 (紫红 色 ) 
国 秦 表 

国 番茄 

国 粉红 

国 蜂 宣 

国 袜 模 
国航 槛 十 神色 

国 钢 赣 

国 古代 的 白色 

国 海风 过 

国 海军 蓝 
国 海洋 绿 
国花 的 白色 
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国 皇家 赣 
国 黄 绿 色 
国 黄土 赤色 
国 灰 秋 剧 风 


国 玫瑰 棕色 

国 米色 ( 浅 褐色 ) 
国 秘鲁 

国 耐火 砖 

国 检 柑 游 纱 

国 漂白 的 杏仁 
国 浅 粉 红 

国 浅海 洋 绿 

国 浅黄 色 

国 浅 灰 色 

国 浅 秋 击 麟 黄 
国 浅 石板 灰 

国 浅 鲜 内 ( 链 鱼 ) 色 
国 巧克力 

国 青色 

国 秋 献 鹿 

国 热情 的 粉红 
国 森林 绿 
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国 沙 粽 色 国 适中 的 紫罗兰 粉色 
国 是 黑 国 适中 的 紫色 
国 驯 国 水 绿色 
国 深 板 岩 暗 蓝 灰 色 国 水 考 色 
国 深 格 色 国 水 鸭 色 
国 深 汾 红 国 束 色 
国 深 韦 模 绿 国 柄 相 绿 
国 深海 洋 绿 国 酸性 色 
国 深 红色 国 桃色 
国 深 灵 色 国 天 蓝 色 
国 深 上 其 布 国 Wi 色 
国 深 兰花 此 国 午夜 的 蓝 色 
国 深 瘟 色 国 鲜 内 (名 鱼 ) 色 
国 深 绿 宝石 国 多 下 
国 深 绿 色 国 狸 红 
国 这 青色 国 委 
国 深秋 可 让 国 球衣 草花 的 淡 紫 色 
国 深 板 灰 国 亚麻 布 
国 深 天 蓝 国 洋红 
国 深 鲜 内 (名 鱼 ) 色 国 银色 
国 深 洋红 色 国 印度 红 
国 深 紫 罗兰 色 国 出 灵 的 白色 
EE 国 玉米 色 
国 矢 车 蕃 的 蓝 色 国 此 罗兰 
国 适中 的 板 岩 瞳 蓝 灰 色 国 紫罗兰 的 蓝 色 
国 适中 的 碧绿 色 国 柴 色 
国 适中 的 春天 的 绿色 国 烷 色 
国志 中 的 海洋 经 E 从 界面 设计 颜色 整合 图 诺 
国 适中 的 兰花 紫 国 颜色 代码 简 集 
国 适中 的 蓝 色 国 英文 代码 颜色 全 集 
国 适中 的 绿 宝石 
第 3 大 部 分 ”能力 测试 资源 库 
〈138 道 能 力 测试 题目 ， 光 盘 路 径 : 开发 资源 库 /能 力 测试 ) 
E 国 数学 及 远 辑 思维 能 力 测试 高 级 测试 
基本 测试 E 国 面 试 能 力 测试 


进 阶 测试 常规 面试 测试 


E 国 编程 英语 能 力 测试 
英语 基础 能 力 测试 


= 国 


E 国 


程序 员 职 业 规划 
国 你 了 解 程序 员 吗 
国 程序 员 自 我 定位 
程序 员 面试 技巧 
国 面试 的 三 种 方式 
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英语 进 阶 能 力 测试 


第 4 大 部 分 面试 系统 资源 库 


(369 项 面试 真题 ， 光 盘 路 径 : 


开发 资源 库 /面试 系统 ) 


如 何 应 对 企业 面试 
英语 面试 
电话 面试 
智力 测试 
国 虚拟 面试 系统 
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第 1 章 HTML 基础 

第 2 章 HTML 文件 基本 标记 
第 3 章 设计 网 页 文本 内 容 
第 4 章 ”使 用 列表 

第 5 章 起 链接 

第 6 章 使 用 图 像 

第 7 章 表格 的 应 用 

第 8 章 层 标 记 一 一 div 

第 9 章 编辑 表单 

第 10 章 多 媒体 页 面 


至 吾 吾 吾 吾 于 于 吾 吾 坚 


本 篇 主要 通过 对 HTML 基础 、 标 记 、 列 表 、 超 链接 、 图 像 与 表格 、 层 标签 以 
及 表单 与 多 媒体 页 面 等 内 容 的 介绍 ， 并 结合 大 量 的 图 示 、 实 例 、 录 像 等 ， 使 读者 快 
速 掌 担 HTML 的 基础 知识 ， 并 为 以 后 深入 学 习 HTML5 黄 定 坚实 的 基础 。 


世 


第 


HTML 基础 
( 名 教学 录像 :22 分钟) 


Internet 的 飞速 发 展 导 致 了 创建 的 网 站 越 来 越 多 , 当 我 们 浏览 这 些 网 站 的 时候 ， 
看 到 的 是 丰富 的 影像 、 文 字 、 图 片 ， 这 些 内 容 都 是 通过 一 种 名 为 HTML 的 语言 表 
现 出 来 的 。 对 于 网 页 设计 和 制作 人 员 ， 尤 其 是 开发 动态 网 站 的 编程 人 员 来 说 ， 制 作 
网 页 的 时 候 ， 如 果 不 涉及 HTML 语言 ， 几 乎 是 不 可 能 的 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


HH 了 解 HTML 的 基本 概念 以 及 发 展 史 
MH ”掌握 HTML 的 基本 结构 


| 熟悉 HTML 文件 的 编写 方法 
MH ”熟悉 利用 浏览 路 浏览 HTML 文件 的 方法 
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1.1 HTML 的 基本 概念 


WWW (World Wide Web， 万 维 网 ) 是 一 种 建立 在 Internet 上 的 、 全 球 性 的 、 交 互 的 、 多 平台 的 、 
分 布 式 的 信息 资源 网 络 。 它 采用 HTML 语言 描述 超 文本 〈Hypertext) 文件 。 这 里 所 说 的 超 文 本 文件 指 
的 是 包含 有 链接 关系 和 多 媒体 对 象 的 文件 。 

WWW 有 3 个 基本 组 成 部 分 , 分 别 是 URL (Universal Resource Locators， 统 一 资源 定位 器 ) 、HTTP 

(Hypertext Transfer Protocol， 超 文本 传输 协议 ) 和 HTML (Hypertext Markup Language， 超 文本 标记 
语言 ) 。 

URL 提供 在 Web 上 进入 资源 的 统一 方法 和 路 径 , 使 得 用 户 所 要 访问 的 站 点 具有 唯一 性 , 这 就 相当 
于 我 们 每 个 人 只 有 一 个 身份 证 号 一 样 。 它 说 明了 链接 所 指向 的 每 个 文件 的 类 型 及 其 准确 位 置 。 

HTTP 是 一 种 网 络 上 传输 数据 的 协议 , 专门 用 于 传输 以 超 文 本 (Hypertext) 或 超 媒 体 (Hypermedia) 
的 形式 提供 的 信息 。 

HTML 语言 是 一 种 文本 类 、 依 靠 解释 的 方式 执行 的 标记 语言 ， 它 是 Internet 上 用 于 编写 网 页 的 主要 
语言 。 用 HTML 编写 的 超 文 本 文件 称 为 HTML 文件 。 

要 把 信息 发 布 到 全 球 ， 就 需要 使 用 能 够 被 大 众 所 接 受 的 语言 ， 也 就 是 使 用 一 种 大 多 数 计算 机 能 够 
识别 的 出 版 语言 。 在 WWW 上 ， 通 常 使 用 的 发 布 语言 是 HTML， 即 超 文本 标记 语言 。 

HTML 语言 是 一 种 简易 的 文件 交换 标准 ， 有 别 于 物理 的 文件 结构 ， 它 旨 在 定义 文件 内 的 对 象 和 描 
述 文件 的 逻辑 结构 ， 而 并 不 定义 文件 的 显示 。 由 于 HTML 所 描述 的 文件 具有 极 高 的 适应 性 ， 所 以 特别 
适合 于 WWW 的 出 版 环境 。 

HTML 是 纯 文本 类 型 的 语言 ， 所 以 使 用 HTML 编写 的 网 页 文件 也 是 标准 的 纯 文本 文件 。 我们 可 以 
任何 文本 编辑 器 (如 Windows 系统 中 的 记事 本 程序 ) 打开 它 ， 查 看 其 中 的 HTML 源 代码 ;也 可 以 在 
用 浏览 器 打开 网 页 时 ， 通 过 选择 “查看 ”|“ 源 文件 ”命令 ， 查 看 网 页 中 的 HTML 代码 。HTML 文件 可 
以 直接 由 浏览 器 解释 执行 ， 而 无 须 编译 。 当 用 浏览 器 打开 网 页 时 ， 浏 览 器 读 取 网 页 中 的 HTML 代码 ， 
分 析 其 语法 结构 ， 然 后 根据 解释 的 结果 显示 网 页 内 容 ， 正 是 因为 如 此 ， 网 页 显示 的 速度 同 网 页 代码 的 
质量 有 很 大 的 关系 ， 保 持 精 简 和 高 效 的 HTML 源 代码 是 十 分 重要 的 。 


1.2 HTML 发 展 史 


HTML 的 历史 可 以 追溯 到 20 世纪 90 年 代 初 。1993 年 HTML 首次 以 因特网 草案 的 形式 发 布 。20 
世纪 90 年 代 的 人 见证 了 HTML 的 快速 发 展 ， 从 2.0 版 到 3.2 版 和 4.0 版 ， 再 到 1999 年 的 4.01 版 。 随 
着 HTML 的 发 展 ，W3C (万 维 网 联盟 ) 掌握 了 对 HTML 规范 的 控制 权 。 

然而 ， 在 快速 发 布 了 这 4 个 版 本 之 后 ， 业 界 普遍 认为 HTML 已 经 “无 路 可 走 ” 了 ， 对 Web 标准 的 
焦点 也 开始 转移 到 了 XML 和 XHTML 上 ，HTML 被 放 在 次 要 位 置 。 不 过 在 此 期 间 ，HTML 体现 出 了 
奖 强 的 生命 力 , 主要 的 网 站 内 容 还 是 基于 HTML 的 。 为 了 能 支持 新 的 Web 应 用 , 同时 克服 现 有 的 缺点 ， 
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HTML 迫切 需要 添加 新 功能 ， 制 定 新 规范 。 

致力 于 将 Web 平台 提升 到 一 个 新 的 高 度 ， 一 些 人 在 2004 年 成 立 了 WHATWG (Web Hypertext 
Application Technology Working Group，Web 超 文本 应 用 技术 工作 组 ) 。 他 们 创立 了 HTML 5 规范 ， 
同时 开始 专门 针对 Web 应 用 开发 新 功能 一 一 这 被 WHATWG 认为 是 HTML 中 最 薄弱 的 环节 。Web 2.0 
这 个 新 词 也 就 是 在 那个 时 候 发 明 的 。Web 2.0 不 负 众望 ， 开 创 了 Web 的 第 2 个 时 代 ， 旧 的 静态 网 站 逐 
渐 让 位 于 需要 更 多 特性 的 动态 网 站 和 社交 网 站 一 一 这 其 中 的 新 功能 真 的 是 数不胜数 。 

2006 年 ，W3C 又 重新 介入 HTML， 并 于 2008 年 发 布 了 HTML 5 的 工作 草案 。2009 年 ，XHTML2 
工作 组 停止 工作 。 因 为 HTML 5 能 解决 非常 实际 的 问题 ， 所 以 在 规范 还 没有 有 具体 确定 下 来 的 情况 下 ， 
各 大 浏览 器 开发 者 就 已 经 按 捧 不 住 了 ， 开 始 对 旗下 产品 进行 升级 以 支持 HTML 5 的 新 功能 。 这 样 ， 得 
益 于 浏览 器 的 实验 性 反馈 ，HTML 5 规范 也 得 到 了 持续 的 完善 ，HTML 5 迅速 融入 到 了 对 Web 平台 的 
实质 性 改进 中 。 


1.3 HTML 的 基本 结构 


区 教学 录像 : 光盘 \TIM\NIxX\I\HTML 的 基本 结构 .exe 


1.3.1 HTML 文件 的 编写 方法 


回 HTML 标签 

一 个 HTML 文件 是 由 一 系列 的 元 素 和 标签 组 成 的 。 元 素 是 HTML 文件 的 重要 组 成 部 分 , 如 title( 文 
件 标题 ) 、img (图 像 ) 及 table (表格 ) 等 ， 元 素 名 不 区 分 大 小 写 。HTML 用 标签 来 规定 元 素 的 属性 
和 它 在 文件 中 的 位 置 。 

HTML 标签 分 为 单独 标签 和 成 对 标签 两 种 。 

大 多 数 标签 成 对 出 现 ， 它 是 由 首 标签 和 尾 标签 组 成 的 。 首 标签 的 格式 为 < 元 素 名 称 >， 尾 标签 的 格 
式 为 </ 元 素 名 称 >。 其 完整 语法 格式 如 下 : 

< 元 素 名 称 > 要 控制 的 元 素 </ 元 素 名 称 > 


成 对 标签 仅 对 包含 在 其 中 的 文件 部 分 发 生 作用 ， 如 <tile> 和 </title> 标 签 用 于 界定 标题 元 素 的 范 目 
也 就 是 说 ，<title> 和 </title> 标 签 之 间 的 部 分 是 此 HTML 文件 的 标题 。 

单独 标签 的 格式 为 < 元 素 名 称 >， 其 作用 是 在 相应 的 位 置 插入 元 素 ， 如 <br> 标 签 便 是 在 该 标签 所 在 
位 置 插入 一 个 换行 符 。 


ED 


日 


/ 
3 培 明 在 每 个 HTML 标签 中 ， 不 区 分 大 小 写 。 如 <HTML>、<html> 和 <Html>， 其 结果 都 是 一 
样 的 。 
在 每 个 HTML 标签 中 , 还 可 以 设置 一 些 属性 , 控制 HTML 标签 所 建立 的 元 素 。 这 些 属性 将 位 于 所 
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建立 元 素 的 首 标签 中 ， 其 基本 语法 格式 如 下 : 
< 元 素 名称 属性 1=" 值 1" 属性 2=" 值 2"...> 
此 ， 在 HTML 文件 中 某 个 元 素 的 完整 定义 语法 如 下 : 
< 元 素 名 称 ”属性 1=" 值 1” 属 性 2=" 值 2"...> 元 素 资料 </ 元 素 名 称 > 


了 
Gan 
回 ”元素 的 概念 


当 用 一 组 HTML 标签 将 一 段 文字 包含 在 中 间 时 ， 这 段 文字 与 包含 文字 的 HTML 标签 被 称 为 一 个 元 素 。 


在 HTML 语法 中 ， 每 个 由 HTML 标签 与 文字 所 形成 的 元 素 内 ， 还 可 以 包含 另 一 个 元 素 。 因 


个 HTML 文件 就 像 是 一 个 大 元 素 包含 了 许多 小 元 素 。 


此 , 整 


在 所 有 的 HTML 文件 中 ， 最 外 层 的 元 素 是 由 <html> 标 签 建立 的 。 在 <html> 标 签 所 建立 的 元 素 中 ， 
包含 了 两 个 主要 的 子 元 素 ， 这 两 个 子 元 素 是 由 <head> 标 签 与 <body> 标 签 所 建立 的 。<head> 标 签 所 建立 


的 元 素 的 内 容 为 文件 标题 ， 而 <body> 标 签 所 建立 的 元 素 内 容 为 文件 主体 。 

HTML 文件 结构 
在 介绍 HTML 文件 结构 之 前 ， 先 来 看 一 个 简单 的 HTML 文件 及 其 在 浏览 器 上 的 显示 结果 。 
面 使 用 文本 (如 Windows 系统 中 自 带 的 记事 本 ) 编写 一 个 HTML 文件 。 


<html> 

<head> 
<title> 文 件 标题 </title> 
</head> 

<body> 

文件 正文 

</body> 

</html> 


运行 效果 如 图 1.1 所 示 。 
从 上 述 代 码 中 可 以 看 出 HTML 文件 的 基本 结构 如 图 1.2 所 示 


| DAE 在 渤 行 PZ 户 ~ C X | 局 文件 三 x 御 开 始 


一 ae 
ET pe 
上 ”全 - 国 - 口 婴 ， mip sg IRO ” i [ee 
= 文件 正 文 
文件 正文 Feas> 
> 六 eR 一 一 一 上 ml> 
图 1.1 HTML 示例 图 1.2 HTML 文件 的 基本 结构 


其 中 , <head> 与 </head> 之 间 的 部 分 是 HTML 文件 的 文件 头 部 分 , 用 以 说 明文 件 的 标题 和 整个 文件 
的 一 些 公共 属性 。<body> 与 </body> 之 间 的 部 分 是 HTML 文件 的 主体 部 分 ， 下 面 介 绍 的 标签 ， 如 果 不 


加 特别 说 明 ， 均 是 嵌 套 在 这 一 对 标签 中 使 用 的 。 


1.3 
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.2 ”文件 开始 标签 <html> 


在 任何 的 一 个 HTML 文件 里 , 最 先 出 现 的 HTML 标签 就 是 <html>， 它 用 于 表示 该 文件 是 以 超 文本 


标记 语言 (HTML) 编写 的 。<html> 是 成 对 出 现 的 ， 首 标签 <html> 和 尾 标签 </html> 分 别 位 于 文件 的 最 
前 面 和 最 后 面 ， 文 件 中 的 所 有 文件 和 HTML 标签 都 包含 在 其 中 。 例 如 : 


<html> 
文件 的 全 部 内 容 
</html> 


该 标签 不 带 有 任何 属性 。 
事实 上 ， 现 在 常用 的 Web 浏览 器 〈 如 正 ) 都 可 以 自动 识别 HTML 文件 ， 并 不 要 求 有 <html> 标 签 ， 


也 不 对 该 标签 进行 任何 操作 。 但 是 ， 为 了 提高 文件 的 适用 性 ， 使 编写 的 HTML 文件 能 适应 不 断 变化 的 


Web 
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浏览 器 ， 还 是 应 该 养 成 使 用 这 个 标签 的 习惯 。 
.3 文件 头 部 标签 <head> 


习惯 上 , 把 HTML 文件 分 为 文件 头 和 文件 主体 两 个 部 分 。 文 件 主体 部 分 就 是 在 Web 浏览 器 窗口 的 


户 


一 些 属性 。 


区 内 看 到 的 内 容 ， 而 文件 头 部 分 用 来 规定 该 文件 的 标题 〈 出 现在 Web 浏览 器 窗口 的 标题 栏 中 ) 和 


<head> 是 一 个 表示 网 页 头 部 的 标签 。 在 由 <head> 标 签 所 定义 的 元 素 中 ， 并 不 放置 网 页 的 任何 内 容 ， 


而 是 放置 关于 HTML 文件 的 信息 ， 也 就 是 说 它 并 不 属于 HTML 文件 的 主体 。 它 包含 文件 的 标题 、 编 码 
方式 及 URL 等 信息 。 这 些 信息 大 部 分 是 用 于 提供 索引 、 辩 认 或 其 他 方面 的 应 用 


写 在 <head> 与 </head> 中 间 的 文本 ， 而 且 是 写 在 <title> 标 签 中 ， 表 示 该 网 页 的 名 称 ， 并 作为 窗口 的 


名 称 显示 在 这 个 网 页 窗口 的 最 上 方 。 


1.3 


如 果 HTML 文件 并 不 需要 提供 相关 信息 时 ， 可 以 省 略 <head> 标 签 。 
.4 文件 标题 标签 <title> 


每 个 HTML 文件 都 需要 有 一 个 文件 名 称 。 在 浏览 器 中 ， 文 件 名 称 作为 窗口 名 称 显示 在 该 窗口 的 最 


上 方 ， 这 对 浏览 器 的 收藏 功能 很 有 有 用。 如 果 浏 览 者 认为 某 个 网 页 对 自己 很 有 用， 今后 想 经 常 阅读 ， 可 
以 选择 正 浏览 器 “收藏 "1 “添加 到 收藏 夹 ” 命 令 将 它 保存 起 来 , 供 以 后 查看 。 网 页 的 名 称 要 写 在 <title> 
和 </title> 之 间 ， 并 且 <title> 标 签 应 包含 在 <head> 与 </head> 标 签 之 中 。 


范围 
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HTML 文件 的 标签 是 可 以 嵌 套 的 ， 即 在 一 对 标签 中 可 以 嵌入 另 一 对 子 标签 ， 用 来 规定 母 标签 所 含 
的 属性 或 其 中 某 一 部 分 内 容 ， 媒 套 在 <head> 标 签 中 使 用 的 主要 有 <title> 标 签 。 


.5 文件 主体 标签 <body> 


<body> 标 签 是 成 对 出 现 的 。 网 页 中 的 主体 内 容 应 该 写 在 <body> 和 </body> 之 间 ， 而 <body> 标 签 包 


多 
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含 在 <html> 标 签 里 面 。 


1.3.6 ”编写 文件 的 注意 事项 


在 编写 文件 的 时 候 ， 要 注意 以 下 事项 : 
(1) “<” 和 “>” 是 任何 标签 的 开始 和 结束 。 元 素 的 标签 要 用 这 对 尖 括 号 括 起 来 ， 并 且 结束 的 标 


签 总 是 在 开始 的 标记 前 加 一 个 斜 杠 。 


割 ， 


(2) 标签 与 标签 之 间 可 以 媒 套 ， 如 : 

<H2><CENTER> 初 识 HTML 文件 </CENTER></H2> 

(3) 在 源 代码 中 不 区 分 大 小 写 ， 如 以 下 几 种 写法 都 是 正确 并 且 相 同 的 标签 : 
<HEAD> 


<head> 
<Head> 


(4) 任何 回 车 和 空格 在 源 代码 中 都 不 起 作用 。 为 了 代码 清晰 ， 建 议 不 同 的 标签 之 间 回 车 后 编写 。 
(5) HTML 标签 中 可 以 放置 各 种 属性 ， 如 : 

<h2 align="center">HTML 初 露 端倪 </h2> 

其 中 align 为 属性 ，center 为 属性 值 ， 元 素 属 性 出 现在 “< >” 内 ， 并 且 和 元 素 名 之 间 有 一 个 空格 分 
属性 值 可 以 直接 书写 ， 也 可 以 使 用 “""”。 如 下 面 的 两 种 写法 都 是 正确 的 : 


<h2 align="center">HTML 初 露 端倪 </h2> 
<h2 align=center>HTML 初 露 端倪 </h2> 


(6) 如 果 希 望 在 源 代码 中 添加 注释 ， 以 便于 阅读 理解 ， 可 以 以 “<!--” 开 始 ， 以 “--!>” 结 束 。 如 


以 下 代码 : 


1- 1> 

<!- 文件 范例 : 1-2.htm -I> 

<!-- 文件 说 明 : 第 一 个 HTML 文件 --!> 
1 


<1-- 一 -- 一 ----------------------------- 1> 


注释 语句 只 出 现在 源 代码 中 ， 而 不 会 在 浏览 器 中 显示 。 


1.4 编写 第 一 个 HTML 文件 


1.4.1 HTML 文件 的 编写 方法 


编写 HTML 文件 主要 有 如 下 3 种 方法 。 


第 1 章 HTML 基础 


手工 直接 编写 

由 于 HTML 语言 编写 的 文件 是 标准 的 ASCII 文本 文件 ,所 以 可 以 使 用 任何 文本 编辑 器 来 打开 并 编 
写 HTML 文件 ， 如 Windows 系统 中 自 带 的 记事 本 。 

使 用 可 视 化 软件 

Microsoft 公司 的 Frontpage、Adobe 公司 的 Dreamweaver 和 Golive 等 软件 均 可 以 可 视 化 的 方式 进行 
网 页 的 编辑 制作 。 

由 Web 服务 器 一 方 实 时 动态 生成 

这 需要 通过 后 台 网 页 编程 来 实现 ， 如 使 用 ASP、PHP 等 脚本 语言 ， 一 般 情况 下 都 需要 数据 库 的 配合 。 


1.4.2 手工 编写 页 面 


下 面 先 使 用 记事 本 来 编写 我 们 的 第 一 个 HTML 文件 。 操 作 步 又 如 下 。 
(1) 选择 “开始 ”|“ 程 序 ”|“ 附 件 ”|“ 记 事 本 ”命令 ， 打 开 记事 本 程序 ， 如 图 1.3 所 示 。 
(2) 在 记事 本 中 直接 输入 下 面 的 HTML 代码 。 


<html> 

<head> 

<title> 简 单 的 HTML 文件 </title> 

</head> 

<body text="blue"> 

<h2 align="center"”>HTML 初 露 端倪 </h2> 


<hr> 

<p> 让 我 们 一 起 体验 超 炫 的 HTML 旅程 吧 </p> 
</body> 

</html> 


(3) 输入 代码 后 ， 记 事 本 中 显示 出 代码 的 内 容 ， 如 图 1.4 所 示 。 


了 了 无 5 看 - 记 可 本 
文件 (有 ” 编 名 (格式 (O) 得 看 V) 帮助 (H) 


a ec 


文件 (月 ” 纺 岛 (E) 想 式 (O) 
站 看 帮助 (H) 


ea 
《body text=“blue “> 
<h2 align=“*center“>HIIL 初 露 端倪 </h2> 


<hr> 
<p> 让 我 们 一 起 体验 超 炫 的 HTILL 旅 程 吧 </p> 
</body> 

| </html 启 


图 1.3 记事 本 图 1.4 显示 了 代码 的 记事 本 


(4) 选择 记事 本 菜单 中 的 “文件 ” |“ 保存” 命令 ， 弹 出 如 图 1.5 所 示 的 “另存 为 ”对 话 框 。 

(5) 在 对 话 框 中 选择 保存 到 的 文件 夹 ， 然 后 在 “保存 类 型 ”中 选择 “所 有 文件 ”， 在 “编码 ”中 
选择 ANSI， 这 里 将 “文件 名 ”设置 为 1-2.htm， 然 后 单 击 “ 保 存 ” 按 钮 。 

(6) 最 后 关闭 记事 本 ， 回 到 保存 文件 的 文件 来， 双击 如 图 1.6 中 所 示 的 1-2.htm 文件 ， 可 以 在 更 
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浏览 器 中 看 到 最 终 页 面 效果 ， 如 图 1.7 所 示 。 


了 为 


上 “ 本 地 磁 音 (D:)】 ， 正在 进行 中 1 ”| 芝 1 


万 
组 织 ”新 于 文 件 冯 和 -人 @ 
修改 日 本 


及 下 2-1 2011/9/8 16:04 HTML 到 
本 训 酝 目 B22 2011/9/8 16:05 HTML 六 | 


1.5 “另存 为 ”对 话 框 


ET EE 
文件 由 坊 久 (5) 到 看 (V) 收 基 天 (A) 工具 帮 卫 (H) | 
” 答 - 加- 口 师 -mp ss9” IRO)” 


HTML 初 露 端倪 | 


让 我 们 一 起 体验 起 炫 的 HTHL 旅 程 吧 


图 1.7 页 面 效果 


1.4.3 ”使 用 可 视 化 软件 制作 页 面 


Adobe Dreamweaver CS5.5 是 一 个 全 面 的 专业 工具 集 , 可 用 于 设计 并 部 署 极 具 吸 引力 的 网 站 和 Web 
页 面 ， 并 提供 强大 的 编辑 环境 以 及 功能 强大 且 基 于 标准 的 WYSIWYG 设计 表面 。Adobe Dreamweaver 
CS5.5 新 版 本 使 用 了 最 新 的 技术 ， 加 入 了 多 屏幕 预览 、jQuery 集成 、CSS3/HTML5 支持 、 尖 端的 实时 
视图 泻 染 、 移 动 UI 构件 、FTPS 支持 、 智 能 编码 协助 集成 FLV 内 容 等 全 新 功能 。 下 面 以 Adobe 
Dreamweaver CS5.5 中 文 版 为 例 ， 说 明 使 用 可 视 化 网 页 编辑 软件 制作 页 面 的 方法 。 操 作 步 又 如 下 。 

(1) 选择 “开始 ” |“ 所 有 程序 ”|Adobe Dreamweaver CS5.5 命令 ， 启 动 软件 的 主 程序 ， 其 主 界面 
如 图 1.8 所 示 。 
(2) 在 Adobe Dreamweaver 工作 区 中 可 以 查看 文档 和 对 象 的 属性 。 工作 区 还 将 许多 常用 操作 放置 
于 工具 栏 中 , 可 以 直接 使 用 工具 栏 中 的 工具 ,对 文档 进行 各 种 操作 ,简单 快捷 。Adobe Dreamweaver CS5.5 
作 区 布局 如 图 1.9 所 示 。 


本 
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<!DOCTYPE html PUBLIC * 
"-//W3c//DTD xHTML 1.0| 
Transitional//EN™ 
"http://www.w3.org/TR/ 
xhtml1/DTD/xhtml1-tran 
sitional.dtd"> 
a <html xmlns= 
"http://www.w3.org/199| 
9/xhtml"> 
<head> 
加 <meta http-equiv= 
"Content-Type" content 
="text/html; 
charset=utf-8" /> 四 
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图 1.9 Adobe Dreamweaver CS5.5 工作 区 布局 
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加 A 一 一 应 用 程序 栏 : 应 用 程序 窗口 顶部 包含 一 个 工作 区 切换 器 、 几 个 菜单 〈 仅 限 Windows 
操作 系统 ) 以 及 其 他 应 用 程序 控件 。 
回 ”B 一 一 文档 工具 栏 : 包含 一 些 按钮 ， 它 们 可 以 提供 各 种 文档 窗口 视图 的 选项 、 各 种 查看 选项 和 
些 常用 操作 。 
加 ”C 一 一 文档 窗口 : 显示 当前 创建 和 编辑 的 文档 。 
加 ”DD 一 一 工作 区 切换 器 : 通过 下 拉 列 表 可 以 选择 不 同 的 工作 区 。 
一 一 面板 组 :帮助 用 户 监控 和 修改 。 如 “插入 ”面板 、“CSS 样式 ”面板 和 “文件 ”面板 。 
若 要 展开 某 个 面板 ， 需 双击 其 选项 卡 。 
F 一 一 CS Live: Adobe Dreamweaver CS5.5 的 相关 服务 。 
G 一 一 标签 选择 器 : 位 于 文档 窗口 底部 的 状态 栏 中 。 显 示 环绕 当前 选 定 内 容 的 标签 的 层次 结构 。 
单 击 该 层次 结构 中 的 任何 标签 都 可 以 选择 该 标签 及 其 全 部 内 容 。 
H 一 一 属性 检查 器 : 用 于 查看 和 更 改 所 选 对 象 或 文本 的 各 种 属性 。 每 个 对 象 具 有 不 同 的 属性 。 
在 编码 器 工作 区 布局 中 ， 属 性 检查 器 默认 是 不 展开 的 。 
加 ”I 一 一 文件 面板 : 用 于 管理 文件 和 文件 来， 无论 它们 是 Dreamweaver 站 点 的 一 部 分 还 是 位 于 
远程 服务 器 上 。 通 过 文件 面板 可 以 访问 本 地 磁盘 上 的 全 部 文件 ， 类 似 于 Windows 的 资源 管理 
器 (Windows) 或 Finder (Macintosh)。 
(3) 单 击 文档 工具 栏 中 的 “ 拆 分 ”按钮 ， 编 辑 窗口 被 分 割 成 左右 两 部 分 ， 如 图 1.10 所 示 ， 左 侧 显 
示 的 是 源 代码 视图 ， 右 侧 是 可 视 化 视图 ， 这 样 可 以 在 选择 和 编辑 源 代码 的 时 候 及 时 地 在 可 视 化 视图 中 
看 到 效果 。 这 两 部 分 是 互相 联系 、 密 不 可 分 的 ， 在 代码 视图 中 所 做 的 任何 修改 都 会 影响 设计 视图 ， 反 
之 亦 然 。 
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1.10 ”代码 视图 和 设计 视图 
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(4) 在 如 图 1.11 所 示 的 位 置 输入 “让 我 们 一 起 体验 超 炫 的 HTML 旅程 吧 ” 作 为 页 面 的 正文 。 


村 
/WC//DTD XHTEL 1.0 


Transitional//EN” 


图 1.11 输入 正文 
(5) 在 如 图 1.12 所 示 的 位 置 输入 “HTML 初 露 端倪 ”作为 页 面 的 标题 。 


3. org/TN/xhtaL /DTD/xhtal -transitional. drdr 
http:// woe. 3. ore/1999/xhtal”> 


avi Cootent-Typs” content=" text/ktal: charset=b2312" /> 
titley 


四 


1.12 输入 标题 
(6) 选 择 “ 文 件 站 保存 命令, 在 如 图 1.13 所 示 的 对 话 框 中 选择 存储 位 置 , 将 文件 命名 为 1-1.html， 
然后 单 击 “ 保 存 ” 按 钮 。 


图 1.13 保存 页 面 
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(7) 在 保存 文件 的 文件 夹 中 找到 1-1.html 文件 ， 双 击 ， 可 以 在 浏览 器 中 直接 看 到 运行 后 的 效果 ， 
如 图 1.14 所 示 。 


Ew 


Es -| 
[rr einwaea | 


| 让 我 们 一 起 体验 超 迷 的 HDL 放 程 吧 | 


图 1.14 ”1-1.html 页 面 效 果 


1.4.4 ”使 用 浏览 器 浏览 HTML 文件 


不 同 的 公司 开发 的 浏览 器 也 有 所 不 同 ， 最 著名 的 浏览 器 是 微软 公司 开发 的 Internet Explorer (简称 
焉 ) 。 浏 览 器 最 核心 的 功能 就 是 查看 我 们 编写 的 HTML 文件 效果 以 及 其 他 网 站 页 面 的 源 代码 。 下 面 我 
们 将 以 下 为 例 来 讲解 一 下 使 用 正 浏览 器 浏览 HTML 的 过 程 。 

启动 耻 浏览 器 后 ， 打 开 刚 才 所 建立 的 HTML 文件 。 

选择 “文件 ” |“ 打开 ”命令 ， 然 后 在 弹出 的 “打开 ”对 话 框 〈 如 图 1.15 所 示 ) 中 单 击 “ 浏 览 ” 按 
钮 ， 找 到 硬盘 中 存放 的 网 页 文件 ， 然 后 单 击 “ 打 开 ” 按 钮 ， 如 图 1.16 所 示 ， 即 可 显示 出 编写 的 网 页 效 
果 了 。 


Kernet Explore 
民 Oe, rere ,1 -| | 


Er ee@ 
个 改 日 其 me 


2011/9/5 15:50 。 HTML 文档 
201W3/6 16:56 HTML 文档 


当 区 et 地 址 ，lnternet Explorer 
打开 加 Td 


图 1.15 “打开 ”对 话 框 | 图 1.16 选择 要 打开 的 文件 
1.4.5 ”使 用 HTML 开发 的 明日 图 书 网 


明日 图 书 网 的 前 台 网 页 制作 就 是 应 用 HTML 编写 完成 的 。 下 面具 体 查看 一 下 实现 明日 图 书 网 的 前 
台 网 页 的 源 文件 。 查 看 源 文件 的 操作 步骤 如 下 。 

(1) 打开 浏览 器 ， 在 地 址 栏 中 输入 http://www.mingribook.com， 然 后 按 Enter 键 。 

(2) 页 面 显示 了 明日 图 书 网 的 首页 面 。 

(3) 选择 浏览 器 菜单 栏 中 的 “查看 ”|“ 源 文件 ”命令 ， 如 图 1.17 所 示 。 
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Mapyfwwwcmingribeokcery 
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图 1.17 选择 “查看 ”|“ 源 文件 ”命令 
(4) 这 样 ， 系 统 自动 地 使 用 记事 本 来 显示 页 面 的 源 文件 ， 如 图 1.18 所 示 。 
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图 1.18 页 面 的 源 文件 


1.5 小 结 


本 章 主要 介绍 了 HTML 的 基本 概念 及 其 发 展 历程 , 重点 介绍 了 HTML 的 基本 结构 ,并 


如 何 使 用 软件 编写 HTML 的 代码 。 
希望 读者 能 够 认真 学 习 本 章 的 内 容 ， 为 以 后 的 学 习 打 下 扎实 的 基础 。 


详细 介绍 了 
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1.6 习 题 
选择 题 
1. HTML 文档 的 树 状 结构 中 ， ) 标签 为 文档 的 根 节点 ， 位 于 结构 中 的 最 顶层 。 
A. <html> B. <head> 
C. <body> D. <title> 


2. 下 面 关 于 设计 网 站 的 结构 的 说 法 错误 的 是 ( 。 ) 。 
A. 按照 模块 功能 的 不 同 分 别 创建 网 页 ， 将 相关 的 网 页 放 在 一 个 文件 夹 中 
B. 必要 时 应 建立 子 文件 夹 
C. 尽量 将 图 像 和 动画 文件 放 在 一 个 大 文件 夹 中 
D. 当地 网 站 和 远程 网 站 最 好 不 要 使 用 相同 的 结构 

3. 下 列 关 于 CSS 样式 和 HTML 样式 的 不 同 之 处 说 法 正确 的 是 (  ) 。 
A. HTML 样式 只 影响 应 用 它 的 文本 和 使 用 所 选 HTML 样式 创建 的 文本 
B. CSS 样式 只 可 以 设置 文字 字体 样式 
C. HTML 样式 可 以 设置 背景 样式 
D. HTML 样式 和 CSS 样式 相同 ， 没 有 区 别 

4. 为 了 标记 一 个 HTML 文件 ， 应 该 使 用 的 HTML 标签 是 ( 六 


A. <p></p> B. <boby></body> 
C. <html></html> D. <table></table> 

5. 如 果 站 点 服务 器 支持 安全 套 接 层 (SSL) ,那么 连接 到 安全 站 点 上 的 所 有 URL 开头 是 ( 
A&. HIIP B. HTTPS C. SHTTP D. SSL 

判断 题 


) 。 


6. HTML 是 HyperText Markup Language〔〈 超 文本 标记 语言 ) 的 缩写 。 超 文本 使 网 页 之 间 具 有 跳 转 
的 能 力 ， 是 一 种 信息 组 织 的 方式 ， 使 浏览 者 可 以 选择 阅读 的 路 径 ， 从 而 可 以 不 需要 顺序 阅读 。(  ) 


7. 在 源 代 码 窗 


中 可 以 看 到 HTML 文件 是 标准 的 ASCII 文件 ， 它 是 包含 了 许多 被 称 为 标签 (tag) 


的 特殊 字符 串 的 普通 文本 文件 。(  ) 


填空 题 


8. HTML 文件 
标记 是 


的 标记 是 <html></html>， 网 页 文件 的 主体 标记 是 <body></body>， 标 记 页 面 标题 的 
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9. 创建 一 个 HTML 文件 的 开始 标记 符 是 ， 结 束 标 记 符 是 5 
10. 严格 地 说 ，_ ”并 不 是 一 种 编程 语言 ， 而 只 是 一 些 能 让 浏览 器 看 懂 的 标记 。 


第 章 


HTML 文件 基本 标记 


( 铝 / 教学 录像 : 44 分 钟 ) 


本 章 主要 介绍 HTML 的 各 种 基本 标记 ， 这 些 都 是 一 个 完整 的 网 页 必 不 可 少 的 。 
通过 这 些 标记 可 以 了 解 网 页 的 基本 结构 及 其 工作 原理 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 

WD ”党 报头 部 标记 <head> 

WI 掌握 标 题 标 记 <title> 

MH” 掌握 元 信息 标记 <meta> 

MH ”掌握 基 底 网 址 标记 <base> 

”掌握 页 面 的 主体 标记 <body> 


HTML 5 从 入 门 到 精通 


2.1 HTML 头 部 标记 


锅 4 教学 录像 : 光盘 \TM\IxW2\HTML 头 部 标记 .exe 


在 HTML 语言 的 头 元 素 中 , 一 般 需 要 包括 标题 、 基 底 信 息 、 元 信息 等 HTML 的 头 元 素 是 以 <head> 
为 开始 标记 ， 以 </head> 为 结束 标记 的 。 一 般 情况 下 ，CSS 和 JavaScript 都 定义 在 头 元 素 中 ， 而 定义 在 


HTML 语言 头 部 的 内 容 往往 不 会 在 网 页 上 直接 显示 。 它 用 于 包含 当前 文档 的 相关 信息 。 


常用 的 头 部 标记 内 容 如 表 2.1 所 示 。 


表 2.1 头 部 标记 
标 记 描述 
<base> 当前 文档 的 URL 全 称 〈 基 底 网 址 ) 
<basefont> 设 定 基准 的 文字 字体 、 字 号 和 颜色 
<title> 设 定 显示 在 浏览 器 左上 方 的 标题 内 容 
<isindex> 表明 该 文档 是 一 个 可 用 于 检索 的 网 关 脚 本 ， 由 服务 器 自动 建立 
<meta> 有 关 文档 本 身 的 元 信息 ， 如 用 于 查询 的 关键 字 、 获 取 该 文档 的 有 效 期 等 
<style> 设 定 CSS 层 合 样式 表 的 内 容 
<link> 设 定 外 部 文件 的 链接 
<script> 设 定 页 面 中 程序 脚本 的 内 容 
<head> 与 </head> 之 间 的 内 容 不 会 在 浏览 器 的 文档 窗口 显示 , 但 是 , 其 间 的 元 素 有 特殊 重要 的 意义 。 


下 面 就 来 分 别 介绍 这 些 标记 的 作用 。 


2.2 ”标题 标记 <title> 


HTML 文件 的 标题 显示 在 浏览 器 的 标题 栏 中 


h， 用 以 说 明文 件 的 


途 。 每 个 HTML 文档 都 应 该 有 标 


题 ， 在 HTML 文档 中 ， 标 题 文 字 位 于 <title> 和 </title> 标 记 之 间 。<title> 和 </title> 标 记 位 于 HTML 文档 


的 头 部 ， 即 <head> 和 </head> 标 记 之 间 。 
语法 
<title>...</title> 
语法 解释 
标记 内 部 就 是 标题 的 内 容 。 
实例 代码 


<html> 
<head> 


<title> 简 单 的 HTML 文件 </title> 


18 


第 2 章 HTML 文件 基本 标记 


</head> 
<body text="blue"> 
<h2 align="center">HTML 初 露 端倪 </h2> 


<hr> 

<p> 让 我 们 一 起 体验 超 炫 的 HTML 旅程 吧 </p> 
</body> 

</html> 


上 面 的 代码 中 的 粗 体 显示 的 就 是 页 面 的 标题 。 保 存 页 面 后 在 下 浏览 器 中 打开 ， 可 以 看 到 在 浏览 器 
的 标题 栏 中 显示 了 刚才 设置 的 标题 “简单 的 HTML 文件 ”， 效 果 如 图 2.1 所 示 。 


HTML 初 圳 端倪 


让 我 们 一 起 体验 超 粮 的 HT 上 L 旅 程 吧 


图 2.1 HTML 页 面 的 标题 
2.3 元 信息 标记 <meta> 


殴 4 教学 录像 : 光盘 \TM\Ix\2\ 元 信息 标记 <meta>.exe 

meta 元 素 提供 的 信息 是 用 户 不 可 见 的 ， 它 不 显示 在 页 面 中 ， 一 般 用 来 定义 页 面 信息 的 名 称 、 关 键 
字 、 作 者 等 。 在 HTML 中 ，meta 标记 不 需要 设置 结束 标记 ， 在 一 个 尖 括号 内 就 是 一 个 meta 内 容 ， 而 
在 一 个 HTML 头 页 面 中 可 以 有 多 个 meta 元 素 。meta 元 素 的 属性 有 两 种 : name 和 http-equiv, 其 中 name 
属性 主要 用 于 描述 网 页 ， 以 便于 搜索 引擎 查找 和 分 类 。 下 面 根据 功能 的 不 同 分 别 介绍 元 信息 标记 的 使 
方法 。 


2.3.1 设置 页 面 关键 字 


设置 页 面 关 键 字 是 为 了 向 搜索 引擎 说 明 这 一 网 页 的 关键 字 ， 从 而 帮助 搜索 引擎 对 该 网 页 进行 查找 
和 分 类 ， 它 可 以 提高 被 搜索 到 的 几率 ， 一 般 可 设置 多 个 关键 字 ， 之 间 用 逗号 隔 开 。 但 是 由 于 很 多 搜索 
引擎 在 检索 时 会 限制 关键 字数 量 ， 因 此 在 设置 关键 字 时 不 要 过 多 ， 应 “一 击 即 中 ”。 


语法 

<meta name="keyname" content=" 具 体 的 关键 字 "> 

语法 解释 

在 该 语法 中 , name 为 属性 名 称 , 这 里 设置 为 keyname, 也 就 是 设置 网 页 的 关键 字 属 性 , 而 在 content 
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中 则 定义 了 具体 的 关键 字 的 内 容 。 
实例 代码 


<html> 

<head> 

<title> 设 置 页 面 关键 字 </title> 

<meta name="keyword" content="html, 元 信息 ,关键 字 "> 
</head> 

<body> 

</body> 

</html> 


在 该 实例 中 设 定 了 html、“ 元 信息 ”和 “关键 字 ” 这 3 个 词语 作为 该 页 面 的 关键 字 。 
2.3.2 ”设置 页 面 描述 


设置 页 面 描述 也 是 为 了 便于 搜索 引擎 的 查找 ， 可 使 用 它 来 描述 网 页 的 主题 等 。 与 关键 字 一 样 ， 设 
置 的 页 面 描述 也 不 会 在 网 页 中 显示 出 来 。 

语法 

<meta name="description" content=" 对 页 面 的 描述 语言 "> 

语法 解释 

在 该 语法 中 ，name 为 属性 名 称 ， 这 里 设置 为 description， 也 就 是 将 元 信息 属性 设置 为 页 面 描述 ， 
在 content 中 定义 具体 的 描述 语言 。 

实例 代码 


<html> 

<head> 

<title> 设 置 页 面 描述 </title> 

<meta name="keyword" content="html, 元 信息 ,关键 字 "> 
<meta name="description" content=" 关 于 HTML 使 用 的 网 站 "> 
</head> 

<body> 

</body> 

</html> 


在 该 实例 中 ， 设 置 了 网 页 的 描述 为 “关于 HTML 使 用 的 网 站 ”。 


2.3.3 设置 编辑 工具 


现在 有 很 多 编辑 软件 都 可 以 制作 网 页 ， 在 源 代 码 的 头 页 面 中 可 以 设置 网 页 编辑 工具 的 名 称 。 与 其 
他 meta 元 素 相同 ， 编 辑 工具 也 只 是 在 页 面 的 源 代码 中 可 以 看 到 ， 而 不 会 显示 在 浏览 器 中 。 
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语法 

<meta name="generator" content=" 编 辑 软件 的 名 称 "> 

语法 解释 

在 该 语法 中 ,name 为 属性 名 , 这 里 将 其 设置 为 generator, 也 就 是 设置 编辑 软件 的 名 称 , 然后 在 content 
中 定义 具体 的 编辑 软件 的 名 称 。 


实例 代码 


<html> 

<head> 

<title> 设 置 编辑 工具 </title> 

<meta name="keyword" content="html, 元 信息 ,关键 字 "> 

<meta name="description" content=" 关 于 HTML 使 用 的 网 站 "> 
<meta name="generator" content="Adobe Dreamweaver CS5.5"> 
</head> 

<body> 

</body> 

</html> 


在 这 一 实例 中 ， 以 Adobe Dreamweaver CS5.5 作为 网 页 的 编辑 工具 。 
2.3.4” 设 定 作 者 信息 


在 页 面 的 源 代码 中 ， 可 以 显示 出 页 面 制 作者 的 姓名 及 个 人 信息 。 这 样 可 以 在 源 代码 中 保留 作者 希 
望 保留 的 信息 。 


语法 

<meta name="author" content=" 作 者 的 姓名 "> 

语法 解释 

在 该 语法 中 ，name 为 属性 名 ， 设 置 其 值 为 author， 即 设置 作者 信息 ， 在 content 中 定义 具体 的 信息 。 
实例 代码 


<html> 

<head> 

<title> 设 定 作者 信息 </title> 

<meta name="keyword" content="html, 元 信息 ,关键 字 "> 

<meta name="description" content=" 关 于 HTML 使 用 的 网 站 "> 
<meta name="generator" content=" Adobe Dreamweaver CS5.5"> 
<meta name="author" content=" 李 小 米 "> 

</head> 

<body> 
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</body> 
</html> 


在 这 一 实例 中 ， 将 作者 的 姓名 “ 李 小 米 ”添加 到 了 网 页 的 源 代码 中 。 
2.3.5 ”限制 搜索 方式 


可 以 通过 在 <meta> 标 记 中 的 设置 来 限制 搜索 引擎 对 页 面 的 搜索 方式 。 
语法 

<meta name="robots" content=" 搜 索 方式 "> 

语法 解释 

在 该 语法 中 ， 搜 索 方式 的 值 和 其 所 对 应 的 含义 如 表 2.2 所 示 。 


表 2.2 content 值 与 其 对 应 的 含义 


content 的 值 描述 
All 表示 能 搜索 当前 网 页 及 其 链接 的 网 页 
Index 表示 能 搜索 当前 网 页 
Nofollow 表示 不 能 搜索 当前 网 页 链接 的 网 页 
Noindex 表示 不 能 搜索 当前 网 页 
None 表示 不 能 搜索 当前 网 页 及 其 链接 的 网 页 


实例 代码 
<html> 

<head> 

<title> 限 制 搜索 方式 </title> 

<meta name="robots" content="index"> 
</head> 

<body> 

</body> 

</html> 


2.3.6 ”设置 网 页 文字 及 语言 


在 网 页 中 还 可 以 通过 语句 来 设 定语 言 的 编码 方式 。 这 样 ， 浏 览 器 就 可 以 正确 地 选择 语言 ， 而 不 需 
要 手动 选取 。 

语法 

第 一 种 方法 : <meta http-equiv="Content-Type" content="text/html; charset= 字 符 集 类 型 "> 

第 二 种 方法 : <meta http-equiv="Content-Language" content=" 语 言 "> 
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语法 解释 

在 该 语法 中 , http-equiv 用 于 传送 HTTP 通信 协议 的 标 头 , 也 就 是 设 定 标 头 属性 的 名 称 , 而 在 content 
中 才 设 具体 的 属性 值 。 在 charset 中 设置 网 页 的 内 码 语系 ， 也 就 是 字符 集 的 类 型 ，charset 往往 设置 为 
gb2312， 即 简体 中 文 。 英 文 是 ISO-8859-1 字符 集 ， 此 外 还 有 BIG5、utf-8、shift-Jis、Euc、Koig 等 字符 
集 。 如 果 采 用 第 二 种 方法 ， 则 简体 中 文 的 设置 为 : 


<meta http-equiv="Content-Language" content="zh_CN"> 


2.3.7 ”设置 网 页 的 定时 跳 转 


在 浏览 网 页 时 经 常会 看 到 一 些 欢迎 信息 的 界面 ， 在 经 过 一 段 时 间 后 ， 这 一 页 面 会 自动 转 到 其 他 页 
中 ， 这 就 是 网 页 的 跳 转 。 使 用 HTTP 代码 就 可 以 很 轻松 地 实现 这 一 功能 。 


语法 

<meta http-equiv="refresh" content=" 跳 转 时 间 ;url= 链 接地 址 "> 

语法 解释 

在 该 语法 中 ，refresh 表示 网 页 的 刷新 ， 而 在 content 中 设 定 刷新 的 时 间 和 有 刷新 后 的 地 址 ， 时 间 和 链 
接地 址 之 间 用 分 号 分 隔 。 默 认 情 况 下 ， 跳 转 时 间 是 以 秒 为 单位 的 。 

实例 代码 

<html> 

<head> 

<title> 设 置 网 页 的 定时 跳 转 </title> 

<meta http-equiv="refresh" content="3;url=http://www.mingribook.com"> 

</head> 

<body> 

您 好 ， 本 页 在 3 秒 之 后 将 自动 跳 转 到 明日 图 书 网 


</body> 
</html> 


运行 程序 代码 ， 其 效果 如 图 2.2 所 示 。 在 3 秒 之 后 ， 网 页 自动 跳 转 到 了 明日 图 书 网 站 ， 如 图 2.3 所 示 。 


文 作坊 得 在) 收 攻 夫 (A) 工具 门客 (H) 


[> EV TE Er > 


” 芥 * 回 "三 -map as IRO)» 


您 好 ， 本 页 在 3 秒 之 后 将 自动 跳 转 到 明日 图 书 网 


图 2.2 运行 自动 跳 转 的 页 面 图 2.3” 跳 转 后 的 页 面 
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2.3.8 设 定 有 效 期 限 


在 某 些 网 站 上 会 设置 网 页 的 到 期 时 间 ， 一 旦 过 期 则 必须 到 服务 器 上 重新 调用 。 

语法 

<meta http-equiv="expires" content=" 到 期 的 时 间 "> 

语法 解释 

在 该 语法 中 ， 到 期 的 时 间 必须 是 GMT 时 间 格 式 ， 即 星期 , 日 月 年 时 分 秒 ， 这 些 时 间 都 使 
英文 和 数字 进行 设 定 。 

实例 代码 

<html> 

<head> 

<title> 设 置 有 效 期 限 </title> 

<meta http-equiv="expires" content="Wed, 14 september 2011 16:20:00 GMT "> 

</head> 

<body> 


</body> 
</html> 


在 实例 中 设置 了 网 页 的 到 期 时 间 为 2011 年 9 月 14 日 16:20。 


2.3.9 禁止 从 缓存 中 调用 


使 用 网 页 缓存 可 以 加 快 浏览 网 页 的 速度 ， 因 为 缓存 将 曾经 浏览 过 的 页 面 暂 存在 电脑 中 ， 当 用 户 下 次 打 
开 同 一 个 网 页 内 容 时 ， 即 可 快速 浏览 该 网 页 ， 省 却 读 取 同 一 网 页 的 时 间 。 但 是 如 果 网 页 的 内 容 经 常 频繁 地 
更 新 ， 网 页 制作 者 希望 用 户 随时 都 能 查看 到 最 新 的 网 页 内 容 ， 则 可 以 通过 meta 语句 禁用 页 面 缓存 。 

语法 

<meta http-equiv="cache-control" content="no-cache"> 

<meta http-equiv="pragma" content=" no-cache "> 


语法 解释 
在 该 语法 中 ，cache-control 和 pragma 都 可 以 用 来 设 定 缓存 的 属性 , 而 在 content 中 则 是 真正 禁止 调 
用 缓存 的 语句 。 

实例 代码 


<html> 
<head> 


<title> 禁 止 从 缓存 中 调用 </title> 


第 2 章 HTML 文件 基本 标记 


<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="pragma" content=" no-cache "> 
</head> 

<body> 

</body> 

</html> 


2.3.10 ”删除 过 期 的 cookie 


如 果 网 页 过 期 ， 则 删除 存盘 的 cookie。cookie 是 由 Internet 站 点 创建 的 、 将 信息 存储 在 计算 机 上 的 
文件 ， 如 访问 站 点 时 的 首选 项 。 
语法 


<meta http-equiv="set-cookie" content=" 到 期 的 时 间 "> 
4 6 
说 明 在 该 语法 中 ， 到 期 的 时 间 同 样 是 GMT 时 间 格 式 ， 
实例 代码 


<html> 

<head> 

<title> 删 除 过 期 的 cookie</title> 

<meta http-equiv="set-cookie" content=" Wed, 14 september 2011 16:20:00 GMT"> 
</head> 

<body> 

</body> 

</html> 


在 实例 中 ， 设 置 了 网 页 的 到 期 时 间 为 2011 年 9 月 14 日 16:20， 即 到 该 时 间 就 删除 存盘 的 cookie。 


2.3.11 ”强制 打开 新 窗口 


强制 网 页 在 当前 窗口 中 以 独立 的 页 面 显 示 ， 可 以 防止 自己 的 网 页 被 别人 当做 一 个 frame 页 调用 。 
语法 

<meta http-equiv="windows-target" content="_top"> 

语法 解释 

在 该 语法 中 ，windows-target 表示 新 网 页 的 打开 方式 ， 而 content 中 设置 top 则 代表 打开 的 是 一 个 
独立 页 面 。 
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实例 代码 

<html> 

<head> 

<title> 强 制 打开 新 窗口 </title> 

<meta http-equiv="windows-target" content=”top"> 
</head> 

<body> 

</body> 

</html> 


2.3.12 ”设置 网 页 的 过 渡 效 果 


些 效果 在 meta 属性 中 就 可 以 实现 。 
语法 
<meta http-equiv=" 过 渡 事件 " content="revealtrans(duration= 过 渡 效 果 持续 时 间 ,transition= 过 渡 方式 )"> 
语法 解释 


在 浏览 某 些 网 站 时 ， 常 常会 在 进入 或 退出 某 个 网 页 时 看 到 一 些 过 渡 效 果 ， 使 得 网 页 更 加 生动 。 这 


在 该 语法 中 ， 过 渡 事 件 可 以 进入 页 面 或 者 离开 页 面 。 进 入 页 面 的 http-equiv 值 为 page-enter， 离 开 


页 面 的 http-equiv 值 为 page-exist。 过 渡 效 果 的 持续 时 间 默 认 以 秒 为 单位 ， 过 渡 方式 的 编号 及 含义 如 


表 2.3 所 示 。 
表 2.3 ”过渡 方 式 的 编号 及 含义 
编 号 含义 编 ”号 含义 
0 盒 状 收缩 12 随意 溶解 
1 盒 状 放射 13 从 左右 两 端 向 中 间 展 开 
2 形 收缩 14 从 中 间 向 左右 两 端 展开 
3 形 放射 15 从 上 下 两 端 向 中 间 展 开 
4 由 下 往 上 16 从 中 间 向 上 下 两 端 展开 
5 由 上 往 下 17 从 右上 角 向 左下 角 展 开 
6 从 左 至 右 18 从 右 下 角 向 左上 角 展 开 
7 从 右 至 左 19 从 左上 角 向 右 下 角 展 开 
8 垂直 百叶 窗 20 从 左下 角 向 右上 角 展开 
9 水 平 百叶 窗 21 水 平 线 状 展 于 
10 水 平 格 状 百叶 窗 22 垂直 线 状 展开 
11 垂直 格 状 百叶 窗 23 随机 产生 一 种 过 渡 方 式 


例 2.1 利用 本 实例 来 演示 进入 和 离开 网 页 的 过 渡 效果 ， 其 中 以 随机 水 平 线 效果 进入 页 面 


2-enter.html， 而 以 垂直 百叶 窗 效果 展开 页 面 2-exit.html。 
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其 实现 的 过 程 如 下 。 


(1) 建立 一 个 名 为 2-gd.html 的 页 面 ， 设 置 该 页 面 的 背景 颜色 为 橘 色 ， 在 该 页 面 中 插入 一 张 图 片 ， 
以 便 更 清晰 地 观察 到 页 面 切换 转 场 的 效果 ， 同 时 在 该 页 面 中 插入 两 个 链接 文字 ， 分 别 是 “进入 网 页 ” 


和 “离开 网 页 ”。 其 实现 的 代码 如 下 。 


<html> 

<head> 

<title> 页 面 的 过 渡 效果 </title> 

</head> 

<body bgcolor="#FFCC00"> 
<center><h2> 页 面 的 过 渡 效 果 </h2> 

<img src="images/1.jpg" width="498" height="349" /><br/><br/><br/> 
<a href="2-enter.htmI"> 进 入 网 页 </a><br/><br/><br/> 
<a href="2-exit.htmI"> 离 开 网 页 </a> 

</center> 

</body> 

</html> 


运行 效果 如 图 2.4 所 示 。 


图 2.4 页 面 的 过 渡 效果 
(2) 当 单 击 图 2.4 中 的 “进入 网 页 ”链接 后 ， 将 在 浏览 器 中 显示 
图 2.5 所 示 ，3 秒 钟 过 后 ， 将 会 进入 到 如 图 2.6 所 示 的 页 面 ， 单 击 “ 返 
实现 的 代码 如 下 。 


<html> 
<head> 


<title> 页 面 的 进入 效果 </title> 


随机 水 平 线 的 切换 转 场 效果 ， 如 


加 


”链接 后 回 返 到 2-gd.html。 其 


<meta http-equiv="page-enter" content="revealtrans(duration=3,transition=21)"/> 


HTML 5 从 入 门 到 精通 


</head> 

<body bgcolor="#FFCC99"> 
<center><h2> 显 示 页 面 的 进入 效果 </h2> 

<img src="images/2.jpg" width="498" height="462" /><br /><br /> 
<a href="2-gd.html"> 返 回 </a> 

</center> 

</body> 

</html> 


ET Tr 


图 2.5 进入 页 面 的 水 平 线 效果 图 2.6 单 击 链接 后 进入 的 页 面 
(3) 当 单 击 图 2.4 中 的 “离开 网 页 ”链接 后 ， 进 入 到 如 图 2.7 所 示 的 网 页 的 离开 页 面 ， 单 击 “ 返 


回 ” 链 接 后 ， 经 过 5 秒 钟 ， 显 示 退 出 页 面 时 的 垂直 百叶 窗 切换 转 场 效 果 《〈 如 图 2.8 所 示 ) ， 最 终 返回 如 
2.4 所 示 的 页 面 。 


图 2.7 页 面 的 退出 效果 图 2.8 页 面 的 垂直 百叶 窗 退 出 效果 
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其 实现 的 代码 如 下 。 


<html> 

<head> 

<meta http-equiv="page-exit" content="revealtrans(duration=5,transition=8)"/> 
<title> 页 面 的 离开 效果 </title> 

</head> 

<body bgcolor="#FFCC99"> 
<center><h2> 显 示 页 面 的 退出 效果 </h2> 

<img src="images/3.jpg" width="498" height="462" /><br /><br /> 
<a href="2-gd.html"> 返 回 </a> 

</center> 

</body> 

</html> 


ER 


解 网 页 的 过 渡 效 果 。 


2.4 基底 网 址 标记 <base> 


URL 路 径 是 一 种 互联 网 地 址 的 表示 方法 ， 在 这 个 地 址 里 可 以 包括 以 何 种 协议 链接 、 要 链接 到 哪 一 


个 地 址 、 链 接地 址 的 端口 (Port) 号 以 及 服务 器 (Server) 里 页 面 的 完整 路 径 和 页 面 名 称 等 信息 。 在 HTML 
中 ，URL 路 径 分 为 两 种 形式 : 绝对 路 径 和 相对 路 径 。 绝 对 路 径 是 将 服务 器 上 磁盘 驱动 器 名 称 和 完整 的 
路 径 都 写 出 来 ， 同 时 也 会 体现 出 磁盘 上 的 目录 结构 ， 相 对 路 径 是 相对 于 当前 HTML 文档 所 在 目录 或 站 


点 根 目录 的 路 径 


HTML 页 面 通过 基底 网 址 能 够 把 当前 HTML 页 面 中 所 有 的 相对 URL 转换 成 绝对 URL。 一 般 情况 
下 ， 通 过 基底 网 址 标记 <base> 设 置 HTML 页 面 的 绝对 路 径 ， 那 么 在 页 面 中 的 链接 地 址 只 需 设置 成 相对 
地 址 即 可 。 当 浏览 器 浏览 页 面 时 ， 会 通过 <base> 标 记 将 相对 地 址 附 在 基底 网 址 的 后 面 ， 从 而 转化 成 绝 


对 地 址 。 
例如 ， 在 HTML 页 面 的 头 部 定义 基底 网 址 如 下 。 


<base href="http://www.mingribook.com/html"> 

在 页 面 主体 中 设置 的 某 一 个 相对 地 址 如 下 。 

<a href="../htmlbook.html"> 

当 使 用 浏览 器 浏览 时 ， 这 个 链接 地 址 就 变 成 如 下 的 绝对 地 址 。 
http://www.mingribook.com/html/book.html 


URL 地 址 的 语句 之 前 。 


此 ,在 HTML 页 面 中 设置 基底 标记 时 不 应 该 多 于 一 个 ， 而 且 要 将 其 


放置 在 头 部 以 及 任何 包含 
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语法 
<base href=" 链 接地 址 " target=" 新 窗口 的 打开 方式 "> 
语法 解释 
在 该 语法 中 ， 链 接地 址 就 是 要 设置 的 页 面 的 基底 地 址 ， 而 新 窗口 的 打开 方式 可 以 设置 为 不 同 的 效 
果 ， 其 属性 值 及 含义 如 表 2.4 所 示 。 
表 2.4 ”链接 窗口 的 打开 方式 


属 性 值 打开 方式 
_parent | 在 上 一 级 窗口 中 打开 ， 一 般 常 用 在 分 帧 的 框架 页 中 
blank | 在 新 窗口 中 打开 
self 在 同一 窗口 中 打开 ， 可 以 省 略 


在 浏览 器 的 整个 窗口 中 打开 ， 忽 略 任何 框架 


实例 代码 

<html> 

<head> 

<base href="http://www.mingribook.com" target=”blank"> 
<title> 基 底 网 址 标记 </title> 

</head> 

<body> 

<a href="../1-2.htm"> 打 开 一 个 相对 地 址 </a> 

</body> 

</html> 


运行 该 程序 , 当 鼠 标 移动 到 链接 文字 上 面 时 , 可 以 看 到 在 I 下 的 状态 栏 中 显示 出 其 完整 的 链接 地 址 ， 
它 是 由 代码 中 设置 的 基底 地 址 加 上 程序 中 的 相对 地 址 组 成 的 ， 如 图 2.9 所 示 。 


kk: 司 ONEESEF FTV- P » © x | S sutra 
文件 (F) 妨 辑 (E) 查看 (V) 收藏 去 (A) 工具 (1) 邦 动 (H) 
”人 租 " 国 - 马 生 -PD)- 去 sg9。IRO ~ 
| 打开 一 个 相对 地 址 


图 2.9 设置 基底 地 址 
2.5 页 面 的 主体 标记 <body> 


区 教学 录像 : 光盘 \TIM\Ix\2\ 页 面 的 主体 标记 <body>.exe 
网 页 的 主体 部 分 以 <body> 标 记 标志 它 的 开始 ， 以 </body> 标 志 它 的 结束 。 在 网 页 的 主体 标记 中 有 很 
多 的 属性 设置 ， 如 表 2.5 所 示 。 
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表 2.5 <body> 元 素 的 属性 


属 性 描述 
text 设 定 页 面 文字 的 颜色 
bgcolor 设 定 页 面 背景 的 颜色 
background 设 定 页 面 的 背景 图 像 
bgproperties 设 定 页 面 的 背景 图 像 为 固定 ， 不 随 页 面 的 滚动 而 滚动 
link 设 定 页 面 默认 的 链接 颜色 
alink 设 定 鼠 标 正在 单 击 时 的 链接 颜色 
vlink 设 定 访问 过 后 的 链接 颜色 
topmargin 设 定 页 面 的 上 边 距 
leftmargin 设 定 页 面 的 左边 距 


下 面 就 来 分 别 介绍 这 些 属性 的 应 用 。 


2.5.1 设置 文字 颜色 一 一 text 


<body> 元 素 的 text 属性 可 以 改变 整个 页 面 默认 文字 的 颜色 。 在 没有 对 文字 进行 单独 定义 颜色 的 时 
候 ， 这 个 属性 将 对 页 面 中 所 有 的 文字 产生 作用 。 

语法 

<body text=" 颜 色 代 码 "> 

语法 解释 


在 该 语法 中 , text 的 属性 值 与 设置 页 面 背景 色相 同 , 也 就 是 说 该 属性 设置 也 和 在 页 面 的 主体 标记 放 
置 在 一 起 。 


实例 代码 


<html> 

<head> 

<title> 设 置 页 面 文字 颜色 </title> 
</head> 

<body text="#0000FF"> 

设 定 页 面 的 文字 颜色 为 蓝 色 
</body> 

</html> 


运行 这 段 代 码 ， 实 现 的 效果 如 图 2.10 所 示 。 


SEC ET 


ET 
”全 "四 ， 写 癌 mF)， 去 2(9， 
设 定 页 面 的 文字 颜色 为 蓝 色 


图 2.10 设置 页 面 文字 颜色 为 蓝 色 
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2.5.2 ”背景 颜色 属性 一 一 bgcolor 


<body> 元 素 的 bgcolor 属性 可 用 来 设 定 整个 页 面 的 背景 颜色 。 与 文字 颜色 相似 , 也 是 使 用 颜色 名 称 


或 者 十 六 进 制 值 来 表现 颜色 效果 。 


语法 

<body bgcolor=" 颜 色 代 码 "> 

语法 解释 

该 语法 中 的 body 就 是 页 面 的 主体 标记 ,也 就 是 说 设置 页 面 的 颜色 要 和 页 面 的 主体 标记 放置 在 一 起 。 
实例 代码 


<html> 

<head> 

<title> 设 置 页 面 文字 颜色 </title> 

</head> 

<body bgcolor="#0000FF" text="#FFFFFF"> 
设 定 页 面 的 背景 为 蓝 色 ， 文 字 的 颜色 为 白色 
</body> 

</html> 


运行 这 段 代 码 , 可 以 看 到 打开 的 页 面 背景 色 为 蓝 色 (#0000FF)， 文 字 的 颜色 为 白色 (#FFFFFF)， 


效果 如 图 2.11 所 示 。 


图 2.11 设置 页 面 的 背景 颜色 为 蓝 色 


2.5.3 ”背景 图 像 属 性 一 一 background 


页 面 中 可 以 使 用 JPG 或 GIF 图 片 来 表现 。 这 些 图 片 可 以 作为 页 面 的 背景 图 ， 通 过 <body> 语 句 中 


background 属性 来 实现 。 它 与 向 网 页 中 插入 图 片 不 同 ， 放 在 网 页 的 最 底层 ， 文 字 和 图 片 等 都 位 于 它 的 
上 面 。 文 字 、 插 入 的 图 片 等 会 覆盖 背景 图 片 。 在 默认 的 情况 下 ， 背 景 图 片 在 水 平方 向 和 垂直 方向 上 会 
不 断 重复 出 现 ， 直 到 铺 满 整个 网 页 。 
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语法 
<body background=" 文 件 链接 地 址 ” bgproperties=" 背 景 图 片 固定 属性 "> 
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语法 解释 

文件 的 链接 地 址 可 以 是 相对 地 址 ， 也 就 是 本 机 上 图 片 文件 的 存储 位 置 ， 也 可 以 设置 为 网 上 的 图 片 
资料 ， 如 http:/www.mingribook.com/book.jpg。 在 默认 情况 下 ， 可 以 省 略 bgproperties 属性 ， 这 时 图 片 
会 按照 水 平和 垂直 的 方向 不 断 重复 出 现 ， 直 到 铺 满 整 个 页 面 ， 如 果 将 bgproperties 属性 设置 为 fixed， 
那么 当 滚动 页 面 时 ， 背 景 图 像 也 会 跟着 移动 ， 这 相对 浏览 者 来 说 ， 就 是 总 停留 在 相同 的 位 置 上 。 

例 2.2 ”下面 以 实例 说 明 背 景 图 片 的 设置 与 显示 效果 。 (实例 位 置 : 光盘 \TM\sI2W2) 

(1) 设置 一 个 图 片 文件 作为 网 页 的 背景 ， 在 默认 情况 下 不 设置 bgproperties 属性 ， 此 时 图 片 将 在 
水 平和 垂直 方向 平 铺 图 像 。2-5.html 代码 如 下 。 


<html> 

<head> 

<title> 背 景 图 片 </title> 

</head> 

<body background="images/1.jpg"> 


图 2.12 平 铺 图 像 作为 背景 


(2) 如 果 希 望 图 片 不 重复 显示 ， 一 般 情况 下 需要 借助 CSS 样式 ， 这 里 简单 介绍 一 下 ， 在 后 面 的 
章节 中 将 详细 介绍 CSS 的 相关 内 容 。 
对 于 网 页 背景 的 样式 设置 ， 一 般 在 头 部 标记 中 添加 style 标记 。2-6.html 代码 如 下 。 


<html> 

<head> 

<title> 背 景 图 片 不 重复 出 现 </title> 

<style type="text/css"> 
body{background-repeat:no-repeat} 
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</style> 
</head> 
<body background="images/1.jpg"> 
</body> 
</html> 


在 这 段 代码 中 ，background-repeat 的 值 设置 为 no-repeat， 也 就 是 不 重复 ， 运 行 效果 如 图 2.13 所 示 。 


如 果 在 这 段 代 码 中 ， 将 background-repeat 的 值 设置 为 repeat-x， 则 背景 图 片 值 在 水 
果 如 图 2.14 所 示 ; 如 果 设 置 为 repeat-y， 则 只 在 垂直 方向 平 铺 。 


方向 平 铺 , 效 


图 2.13 背景 图 像 单独 显示 图 2.14 背景 图 像 水 平平 铺 效 果 


(3) 除了 设置 背景 是 否 重复 之 外 ， 在 网 页 中 还 可 以 设置 背景 图 片 是 否 随 滚动 条 的 滚动 而 变化 。 这 


一 属性 是 通过 bgproperties 参数 来 设 定 的 ， 将 bgproperties 的 值 设 置 为 fxed， 背 景 图 片 会 
静止 不 动 。2-8.html 代码 如 下 。 


<html> 
<head> 
<title> 背 景 图 片 </title> 
<style type="text/css"> 
body{background-repeat:no-repeat} 
</style> 
</head> 
<body background="images/1.jpg" bgproperties="fixed" text="#00FFCC"> 
1 行 金 柳 清 酒 斗 十 千 <br/> 
2 行 玉 盘 珍 饶 直 万 钱 <br/> 
3 行 停 杯 投 等 不 能 食 <br/> 
4 行 拔 剑 四 顾 心 茫然 <br> 
5 行 欲 渡 黄 河 冰 塞 川 <br> 
6 行将 登 太行 雪 满 山 <br/> 
7 行 闲 来 垂钓 契 溪 上 <br/> 
8 行 忽 复 乘 舟 梦 日 边 <br> 
9 行 行路 难 行路 难 <br/> 
10 行 多 歧路 今 安 在 <br/> 
11 行 长 风 破 浪 会 有 时 <br/> 
12 行 直 挂 云 帆 济 沧海 <br/> 
</body> 
</html> 


固 


定 在 页 面 上 


第 2 章 HTML 文件 基本 标记 


运行 这 段 代码 后 的 效果 如 图 2.15 所 示 。 当 拖 动 滚动 条 时 ， 会 发 现 只 有 文字 在 动 ， 而 背景 却 是 静止 
不 动 的 ， 如 图 2.16 所 示 。 


I | Dw (#1 DP - © x | San x > Ca 
文件 名 沁 (E) 查看 V) 收 训 夫 (A) 工具 (T) 帮助 (H) 文 必 们 。 血 吉 (可 看 (V) 收 基 关 (A 工具 (T) 帮助 (H) 
= TT 


| 


图 2.15 运行 代码 的 效果 图 2.16” 拖 动 滚动 条 的 效果 
2.5.4 ”设置 链接 文字 属性 一 一 link 


在 网 页 创建 中 ， 除 了 文字 、 图 片 ， 超 链接 也 是 最 常用 的 一 种 元 素 。 超 链接 中 以 文字 链接 最 多 ， 在 
默认 情况 下 ， 浏 览 器 以 蓝 色 作 为 超 链接 文字 的 颜色 ; 访问 过 的 文字 则 变 为 暗 红色 。 在 创作 网 页 时 ， 可 
以 通过 link 参数 修改 链接 文字 的 颜色 。 


语法 
<body link=" 颜 色 代码 "> 
语法 解释 


这 一 属性 的 设置 方法 与 前 面 设置 几 种 颜色 的 参数 的 方法 类 似 ， 都 是 与 <body> 标 记 放 置 在 一 起 ， 表 
明 它 对 网 页 中 所 有 未 单独 设置 的 元 素 起 作用 。 

例 2.3 下 面 通 过 实例 设置 未 访问 的 链接 文字 的 颜色 。【〈 实 例 位 置 : 光盘 \TMsI\2\3) 

2-9.html 代码 如 下 。 


<html> 

<head> 

<title> 页 面 的 链接 文字 </title> 

</head> 

<body text="#6699FF" link="#FF0000"> 

<center> 

设置 文字 的 链接 效果 

<br /><br /> 

<a href="http://www.mingribook.com"> 链 接 文字 </a> 
<br /><br /> 
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</center> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 链接 文字 的 颜色 已 经 不 是 默认 的 蓝 色 ， 而 是 设置 成 了 红色 ， 如 图 2.17 所 示 。 
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链接 文字 


2.17 设置 链接 文字 的 颜色 


在 上 面 的 代码 中 ,添加 正在 访问 的 文字 颜色 设置 。 这 一 属性 需要 用 到 alink 参数 , 添加 后 的 2-10.html 
代码 如 下 。 


<html> 

<head> 

<title> 页 面 的 链接 文字 </title> 

</head> 

<body text="#6699FF" link="#FF0000" alink="#99FF00"> 
<center> 

设置 文字 的 链接 效果 

<br /><br /> 

<a href="http://www.mingribook.com"> 链 接 文 字 <a/> 
<br/><br/> 

<a href="http://www.mrbccd.com"> 正 在 访问 的 链接 </a> 
</center> 

</body> 

</html> 


运行 这 段 代码 之 后 ， 单 击 链接 文字 “正在 访问 的 链接 ”， 会 发 现 按 下 鼠标 时 文字 颜色 变 成 了 绿色 ， 
如 图 2.18 所 示 。 


) 
|S Dm 2-10html D+ OX | 局 rmsews x A 


pa 


文件 们 ” 病 号 E) ”可 看 (V) ”家 襄 夫 (A) 工具 (D 帮 劲 (H) 
况 ” 丛 " 国 " 口 间 PD) 安 2)> ID 全 "所 


图 2.18 设置 正在 访问 的 文字 颜色 
在 上 面 的 代码 中 ， 继 续 使 用 vlink 参数 设置 访问 后 的 文字 链接 颜色 ，2-11.html 实现 的 代码 如 下 。 


<html> 
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<head> 

<title> 页 面 的 链接 文字 </title> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head> 

<body text="#6699FF" link="#FF0000" alink="#99FF00" vlink="#CCCCCC"> 
<center> 

设置 文字 的 链接 效果 

<br/><br/> 

<a href="http://www.mingribook.com"> 链 接 文字 </a> 

<br/><br/> 

<a href="2-11.html"> 访 问 后 的 链接 </a> 

</center> 

</body> 

</html> 


运行 这 段 代码 之 后 ， 当 单 击 “ 访 问 后 的 链接 ”文字 链接 后 ， 与 此 同时 也 就 完成 了 页 面 的 跳 转 〔 这 
里 设置 的 是 跳 转 回 本 页 ) ， 这 时 会 看 到 访问 过 的 链接 文字 颜色 变 成 了 灰色 ， 如 图 2.19 所 示 。 


ER 


| 本 下 一 
Ea www 2- ox 


设置 文字 的 


图 2.19 设置 访问 后 的 文字 链接 颜色 
2.5.5 ”设置 边 距 一 一 margin 


在 网 页 的 制作 过 程 中 ， 还 可 以 定义 页 面 的 空白 ， 也 就 是 内 容 与 浏览 器 边框 之 间 的 距离 。 其 中 包括 
上 边框 和 左边 框 ， 设 定 合适 的 边 距 可 以 防止 网 页 外 观 过 于 拥挤 。 
语法 
<body topmargin=" 上 边 距 的 值 "leftmargin=" 左 边 距 的 值 "> 
语法 解释 
在 默认 情况 下 ， 边 距 的 值 是 以 像素 为 单位 的 。 
实例 代码 
<html> 
<head> 
<title> 设 置 边 距 </title> 
</head> 
<body topmargin="60" leftmargin="50"> 
设置 页 面 的 上 边 距 为 60 像素 


<br/> 
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设置 页 面 的 左边 距 为 50 像素 
</body> 
</html> 


运行 此 段 代码 ， 可 以 看 到 设置 边 距 前 后 的 对 比 效果 ， 设 置 边 距 前 的 效果 如 图 2.20 所 示 ， 设 置 边 距 
后 的 效果 如 图 2.21 所 示 。 


Er ER EEC 
”和 丛 * 园 * 口 顺 mm 和)” 


3 [8 oven p - o x | Sas 
文件 由 妨 久 (5) 查看 VM) 收 大 (A) 工 具 (帮助 (| 设置 页 面 的 上 边 距 为 60 像 素 
"| 设置 页 而 的 左边 大 为 50 俐 第 


设置 页 面 的 上 边 距 为 60 像 素 
设置 页 面 的 左边 距 为 50 像 系 


图 2.20 默认 的 页 面 的 效果 图 2.21 设置 边 距 的 效果 
2.6 页 面 的 注释 标记 


在 网 页 中 ， 除 了 以 上 基本 元 素 外 ， 还 包含 一 种 不 显示 在 页 面 中 的 元 素 ， 那 就 是 代码 的 注释 文字 。 
适当 的 注释 可 以 帮助 用 户 更 好 地 了 解 网 页 中 各 个 模块 的 划分 ， 也 有 助 于 以 后 对 代码 的 检查 和 修改 。 给 
代码 加 注释 ， 是 一 种 很 好 的 编程 习惯 。 


语法 

< 上 -注释 的 文字 --> 

语法 解释 

注释 文字 的 标记 很 简单 ， 只 需要 在 语法 中 “注释 的 文字 ”的 位 置 上 添加 需要 的 内 容 即 可 。 


2.7 实例 演练 一 一 创建 基本 的 HTML 网 页 


例 2.4 创建 一 个 基本 的 HTML 网 页 ， 在 这 个 HTML 网 页 中 完成 对 明日 科技 公司 的 简介 。 《实例 
位 置 ， 光盘 \TMNsI2\4) 

具体 步骤 如 下 。 

(1) 创建 一 个 HTML 文件 ， 将 其 命名 为 slyl.html。 

(2) 在 <title>...</title> 标 记 中 定义 文件 的 标题 为 “明日 科技 公司 简介 ”。 

(3) 在 页 面 的 主体 标记 内 ， 页 面 的 背景 设置 为 图 片 ， 文 字 的 颜色 设置 为 黑色 ， 上 边 距 、 左 右边 距 
都 设置 为 10 像素 。 其 实现 的 代码 如 下 。 
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<body background="images/1.png" text="#333333" topmargin="10" leftmargin="10" rightmargin="10"> 

吉林 省 明日 科技 有 限 公司 是 一 家 以 计算 机 软件 技术 为 核心 的 高 科技 型 企业 ， 公 司 创 建 于 2000 年 12 月 ， 是 专业 的 
应 用 软件 开发 商 和 服务 提供 商 。 多 年 来 始终 致力 于 行业 管理 软件 开发 、 数 字 化 出 版 物 开发 制作 、 计 算 机 网 络 系统 
综合 应 用 、 行 业 电子 商务 网 站 开发 等 领域 ， 涉 及 生产 、 管 理 、 控 制 、 仓 贮 、 物 流 、 营 销 、 服 务 等 行业 。 公 司 拥有 
软件 开发 和 项 目 实施 方面 的 资深 专家 和 学 习 型 技术 团队 ， 公 司 的 开发 团队 不 仅 是 开拓 进取 的 技术 实践 者 ， 更 致力 
于 成 为 技术 的 普及 和 传播 者 ， 并 以 软件 工程 为 指导 思想 建立 了 软件 研发 和 销售 服务 体系 。 公 司 基于 长 期 研发 投入 
和 丰富 的 行业 经 验 ， 本 着 “让 客户 轻松 工作 ， 同 客户 共同 成 功 ”的 奋斗 目标 ， 努 力 发 挥 “ 专 业 、 易 用 、 高 效 ” 的 
产品 优势 ， 竭 诚 为 广大 用 户 提 供 优质 的 产品 和 服务 。<br/><br/> 


企业 宗旨 : 为 企业 服务 ， 打 造 企业 智能 管理 平台 ， 改 善 企 业 的 管理 与 运作 过 程 ， 提 高 企业 效率 ， 降 低 管理 成 本 ， 
增强 企业 核心 竞争 力 。 为 企业 快速 发 展 提供 源 动力 。<br/><br/> 


企业 精神 : 博学 、 创 新 、 求 实 、 笃 行 <br/><br/> 

公司 理念 : 以 高 新 技术 为 依托 ， 战 略 性 地 开发 具有 巨大 市 场 潜力 的 高 价值 的 产品 。<br/><br/> 

公司 远景 : 成 为 拥有 核心 技术 和 核心 产品 的 高 科技 公司 ， 在 某 些 领域 具有 领先 的 市 场地 位 。<br/><br/> 
核心 价值 观 : 永 葆 创业 激情 、 每 一 天 都 在 进步 、 容 忍 失败 ， 鼓 励 创 新 、 充 分 信任 、 平 等 交流 。 

</body> 


(4) 通过 CSS 样式 的 style 标记 ， 去 除 重复 的 背景 图 。 其 实现 的 代码 如 下 。 
<style type="text/css"> 
body{background-repeat:no-repeat} 
</style> 


运行 效果 如 图 2.22 所 示 。 


的 高 价值 的 产品 。 


图 2.22 明日 科技 公司 简介 
2.8 小 结 


本 章 主要 对 HTML 文件 的 基本 标记 中 的 功能 进行 了 详细 的 介绍 ,包括 HTML 头 部 标记 、 标 题 标记 、 
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元 信息 标记 、 基 底 网 址 标记 、 页 面 的 主体 标记 、 页 面 的 注释 标记 。 对 标记 中 的 主要 属性 以 实例 的 形式 
进行 了 详细 的 介绍 。 这 些 标记 和 属性 是 HTML 的 基石 ， 要 想 建立 HTML 的 大 厦 ,就 要 好 好 地 学 好 本 章 
的 基石 。 


2.9 习 题 

选择 题 
1. 设置 链接 颜色 使 用 哪 种 标记 ? (  ) 

A. <body bgcolor=? > B. <body text=? > 

C. <body link=? > D. <body vlink=? > 
2. HTML 语言 中 ， 设 置 背 景 颜 色 的 代码 是 (  )。 

A. <body bgcolor=?> B. <body text=?> 

C. <body link=?> D. <body vlink=?> 
3. 在 HTML 中，(  ) 不 是 链接 的 目标 属性 。 

A. _self B. new C. _blank D. _top 
4. 在 网 页 中 ， 必 须 使 用 ( ” ”) 标记 来 完成 超级 链接 。 

A. <a>...</a> B. <p>...</p> C. <link>...</link> D. <li>...</li> 


5. 用 HTML 标记 语言 编写 一 个 简单 的 网 页 ， 网 页 最 基本 的 结构 是 ) 。 
A. <html> <head>...</head> <frame>...</frame> </html> 
B. <html> <title>...</title> <body>...</body> </html> 
C. <html> <title>...</title> <frame>...</frame> </html> 
D. <html> <head>...</head> <body>...</body> </html> 
6. 若 要 将 网 页 的 背景 图 形 设置 为 bg.jpg， 以 下 标记 中 ， 正 确 的 是 be 


A. <body background="bg.jpg"> B. <body bground="bg.jpg"> 
C. <body image="bg.jpg"> D. <body bgcolor="bg.jpg"> 
判断 题 


7. 超 链 接 是 一 种 标记 ， 形 象 的 说 法 就 是 单 击 网 页 中 的 这 个 标记 则 能 够 加 载 另 一 个 网 页 ， 这 个 标记 
可 以 设置 在 文本 上 也 可 以 设置 在 图 像 上 。 ( ) 

8. HTML 的 颜色 属性 值 中 ，Black 的 代码 是 #00000。 ( 》 

填空 题 


9. 头 部 标记 是 指 
10. 元 信息 标记 是 指 


第 
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设计 网 页 文本 内 容 


( 他 教学 录像 : 29 分 钟 ) 


在 网 页 创作 中 ， 文字 是 最 基本 的 元 素 之 一 。 提 高 文字 的 易 读 性 ， 可 使 浏览 者 在 
短 时 间 内 阅读 更 多 的 文字 、 理 解 更 多 的 信息 ， 同 时 也 能 使 文字 更 清晰 、 美 现 ， 从 而 
达到 网 页 创作 者 所 追求 的 目标 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 

WI 标题 文字 的 建立 

H 设置 文字 格式 

H 设置 段落 格式 

WI 水平线 标 记 

WI 其 他 文字 标记 


HTML 5 从 入 门 到 精通 


3.1 ”标题 文字 的 建立 


区 il 教学 录像 : 光盘 \TM\Ix\3\ 标 题 文字 的 建立 .exe 


HTML 文档 中 的 标题 文字 分 别 用 来 指明 页 面 上 的 1~6 级 标题 。 


3.1.1 ”标题 文字 标记 <h> 


标题 文字 共 包 含 6 种 标记 ， 每 一 种 的 标题 在 字号 上 都 有 明显 的 区 别 ， 从 1 级 到 6 级 依次 减 小 。 
语法 


1 级 标题 : <h1>...</h1> 
2 级 标题 : <h2>.…</h2> 
依次 下 去 ， 到 6 级 标题 。 


语法 解释 


在 该 语法 中 ，1 级 标题 使 用 最 大 的 字号 表示 ，6 级 标题 使 用 的 是 最 小 的 字号 。 
例 3.1 实例 代码 (实例 位 置 ， 光盘 \TM\sN3\1) 


<html> 

<head> 

<title> 标 题 文字 的 效果 </title> 
</head> 

<body> 

<h1>1 级 明日 科技 </h1> 
<h2>2 级 明日 科技 </h2> 
<h3>3 级 明日 科技 </h3> 
<h4>4 级 明日 科技 </h4> 
<h5>5 级 明日 科技 </h5> 
<h6>6 级 明日 科技 </h6> 
</body> 

</html> 


运行 这 段 代 码 ， 可 以 看 到 网 页 中 6 种 不 同 大 小 的 标题 文字 ， 如 图 3.1 所 示 。 


1 级 明日 科技 


2 级 明日 科 技 
3 级 明日 科技 
如 明日 科技 


图 3.1 标题 文字 的 效果 
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在 浏览 器 中 的 正文 部 分 ， 可 以 显示 标题 文字 ， 所 谓 标题 文字 就 是 以 某 种 固定 的 字号 显示 文字 。 


第 3 章 设计 网 页 文本 内 容 


3.1.2 ”标题 文字 的 对 齐 方 式 一 一 align 


默认 情况 下 ， 标 题 文字 是 左 对 齐 的 。 而 在 网 页 制作 的 过 程 中 ， 可 以 实现 标题 文字 的 编排 设置 。 在 
文字 标题 的 属性 设置 中 ， 最 常用 的 就 是 关于 对 齐 方式 的 设置 ， 这 就 需要 使 用 align 参数 来 进行 设置 。 
语法 
align=" 对 齐 方式 " 
语法 解释 
在 该 语法 中 ，align 属性 需要 设置 在 标题 标记 的 后 面 ， 标 题 文字 的 对 齐 属 性 如 表 3.1 所 示 。 
表 3.1 标题 文字 的 对 齐 方式 


例 3.2 实例 代码 (实例 位 置 ， 光盘 \TMNsl3\2) 


<html> 

<head> 

<title> 标 题 文 字 的 对 齐 效果 </title> 

</head> 

<body> 

<h1> 古 诗 介绍 </h1> 

<h2 align="center"> 作 者 辛弃疾 </h2> 

<h3 align="left"> 三 更 灯火 五 更 鸡 ， 正 是 男儿 发 愤 时 </h3> 
<h4 align="right"> 黑 发 不 知 勤 学 早 ， 白 首 方 悔 读书 迟 </h4> 


运行 这 段 代码 ， 可 以 看 到 不 同 对 齐 方 式 的 标题 效果 ， 如 图 3.2 所 示 。 


在] DAmn\3\W3-2html 及 -CX 上司 标 要 文字 的 对 齐 效果 
古诗 介绍 
作者 辛弃疾 
三 更 灯火 五 更 鸡 , 正 是 男儿 发 愤 时 
黑 发 不 知 勤学 早 , 白 首 方 悔 读书 退 


图 3.2 标题 文字 的 对 齐 效果 
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3.2 设置 文字 格式 


名 1 教学 录像 光盘 \TIMN\Ix\3\ 设 置 文字 格式 .exe 


除了 标题 文字 外 ， 在 网 页 中 普通 的 文字 信息 更 是 不 可 缺少 的 。 而 多 种 多 样 


变 得 更 加 绚 
在 网 页 


文字 效果 的 


用 。 


的 编辑 中 ， 可 以 直接 在 文字 的 主体 部 分 输入 文字 ， 这 些 文字 会 显示 在 
语言 编辑 中 最 简单 的 事情 ， 只 需要 在 <body> 标 记 和 </body> 标 记 之 间 输 入 相应 的 文字 即 可 。 设 置 不 同 的 
属性 位 于 文字 格式 标记 <font> 中 ， 下 面 将 逐一 讲解 各 种 文字 格式 的 设置 方式 。 


3.2.1 ”设置 文字 字体 一 一 face 


的 文字 效果 可 以 使 网 页 


E 页 面 中 。 这 是 HTML 


在 HTML 语言 中 , 可 以 通过 face 属性 设置 文字 的 不 同 字体 效果 。 设置 的 字体 效果 必须 是 用 户 系统 中 已 
经 安装 了 相应 的 字体 后 才 可 以 正确 浏览 ， 否 则 这 些 特殊 字体 会 被 浏览 器 中 的 普通 字体 所 代替 。 
计 网 页 时 尽量 不 使 用 特殊 字体 ， 以 免 在 用 户 浏览 时 无 法 看 到 正确 的 效果 。 由 于 用 户 系统 默认 情况 下 都 包含 
了 宋体 、 黑 体 等 几 种 基本 字体 ， 因 此 网 页 的 创建 者 应 该 注意 在 设计 网 页 时 ， 最 好 多 利用 这 几 种 字体 。 


语法 


<font face=" 字 体 1, 字 体 2… "> 应 用 了 该 字体 的 文字 </font> 
语法 解释 


在 该 语法 中 ，face 属性 的 值 可 以 是 1 个 或 者 多 个 。 默 认 情况 下 ， 使 用 第 1 种 字体 进行 显示 ; 如 果 
第 1 种 字体 不 存在 ， 则 使 用 第 2 种 字体 进行 代替 ， 以 此 类 推 。 如 果 设 置 的 几 种 字体 在 浏览 器 中 都 不 存 


在 ， 则 会 以 默认 字体 显示 。 


例 3.3 


<html> 
<head> 


实例 代码 〈 实 例 位 置 : 光盘 \TMNsl3\3) 


<title> 不 同 字体 的 显示 效果 </title> 


</head> 


<body> 


<font face=" 华 文 彩云 "> 登山 则 情 满 于 山 </font><br/><br/> 
<font face=" 隶 书 "> 观 海 则 意 溢 于 海 </font> 


</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 几 种 不 同 的 字体 效果 ， 如 图 3.3 所 示 。 


XA 


er 
EC EE EE 


3.3 设置 不 同 的 文字 字体 


因此 ， 在 设 


3.2.2 ”设置 字号 一 一 size 


第 3 章 设计 网 页 文本 内 容 


HTML 页 


H 


中 的 文字 可 以 使 


不 同 的 字号 表现 。 字 号 指 的 是 字体 的 大 小 ， 它 没有 一 个 相对 的 大 小 


标准 ， 其 大 小 只 是 相对 于 默认 字体 而 言 。 除 了 使 用 标题 文字 标记 设置 固定 大 小 的 字号 之 外 ，HTML 语 
言 提 供 了 <font> 标 记 size 属性 来 设置 普通 文字 的 字号 。 


语法 


<font size=" 文 字 字 号 "></font> 


语法 解释 


在 该 语法 中 ， 文 字 的 字号 可 以 设置 为 1~7， 也 可 以 是 +1~+7 或 者 是 -1~-7。 这 些 字号 并 没有 一 个 固 


定 的 大 小 值 ， 而 是 相对 于 默认 文字 大 小 来 设 定 的 ， 默 认 文字 的 大 小 与 3 号 字 相 同 ， 而 数值 越 大 ， 文 字 


也 越 大 。 


例 3.4 实例 代码 (实例 位 置 ， 光盘 \TMNsl3\4) 


<html> 
<head> 


<title> 设 置 不 同 的 文字 大 小 </title> 


</head> 
<body> 


<font size="1">1 号 字体 的 效果 </font><br/> 

<font size="2">2 号 字体 的 效果 </font><br/> 

<font size="3">3 号 字体 的 效果 </font><br/> 

<font size="4">4 号 字体 的 效果 </font><br/> 

<font size="5">5 号 字体 的 效果 </font><br/> 

<font size="6">6 号 字体 的 效果 </font><br/> 

<font size="7">7 号 字体 的 效果 </font><br/> 

<font size="+2"> 默 认 字号 +2， 也 就 是 5 号 字体 的 效果 </font><br/> 
<font size="-1"> 默 认 字 号 -1， 即 2 号 字体 的 效果 </font><br/> 


</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 文字 的 大 小 变化 ， 其 效果 如 图 3.4 所 示 。 


4 的 效果 
5 号 字体 的 效果 
6 号 字体 的 效果 

bs A 
7 号 字体 的 效果 
默认 字号 


ex 


le ET 5 cx| eaakatssx 


+2， 也 就 是 5 号 字体 的 效果 
时 


号 字体 的 数 


图 3.4 设置 不 同 的 字号 
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3.2.3 设置 文字 颜色 一 color 


在 HIML 页 面 中 ， 还 可 以 通过 不 同 的 颜色 表现 不 同 的 文字 效果 。 丰 富 的 颜色 变化 能 够 极 大 地 增强 
文档 的 表现 力 。 


语法 
<font color=" 颜 色 代码 "></font> 
语法 解释 


与 网 页 背景 色 的 设置 类 似 ， 颜 色 代 码 也 是 十 六 进 制 的 。 
例 3.5 实例 代码 〈 实 例 位 置 ， 光盘 \TMNsIN3\S) 


<html> 

<head> 

<title> 设 置 不 同 的 文字 颜色 </title> 

</head> 

<body> 

<font face=" 隶 书 " size="+4" color="#0066FF"> 明 日 科技 </font><br/> 

<font face=" 宋 体 "size="+5" color="#FFCC66"> 编 程 词典 </font><br/> 

<font face=" 华 文 楷体 "size="+3" color="#99FF00"> 数 字 化 出 版 的 领导 者 </font><br/> 
</body> 

</html> 


明日 科技 


编程 词典 
数字 化 出 版 的 领导 者 


图 3.5 设置 不 同 的 文字 颜色 
3.2.4 粗 体 、 斜 体 、 下 划 线 一 一 strong、em、u 


在 浏览 网 页 时 ， 常 常 可 以 看 到 一 些 特 殊 效 果 的 文字 ， 如 粗 体 字 、 斜 体 字 以 及 带 下 划 线 的 文字 ， 而 
这 些 文字 效果 也 可 以 通过 设置 HTML 语言 的 标记 来 实现 。 

语法 

<strong> 粗 体 的 文字 </strong> 


<em> 和 斜体 字 </em> 
<u> 带 下 划 线 的 文字 </u> 


第 3 章 设计 网 页 文本 内 容 


语法 解释 


这 几 种 效果 的 语法 类 似 ， 只 是 标记 不 同 。 粗 体 的 效果 也 可 以 通过 标记 <b> 来 实现 ; 斜体 字 也 可 以 使 
标记 <I> 或 者 <cite> 表 示 。 
例 3.6 实例 代码 (实例 位 置 ， 光盘 \TMNsDN3\6) 


<html> 

<head> 

<title> 设 置 不 同 的 文字 效果 </title> 

</head> 

<body> 

<strong> 阴 日 科技 </strong><b> 是 数字 化 </b> 的 <cite> 倡 导 者 </cite> 
</body> 

</html> 


运行 这 段 代 码 ， 可 以 看 到 不 同 的 样式 效果 ， 且 使 用 不 同 的 标记 也 可 以 达到 相同 的 效果 ， 如 图 3.6 


| pwnm P- ox| ET 
明日 科技 是 数字 化 的 您 翌 孝 


图 3.6 设置 文字 的 不 同样 式 


3.2.5 ”上 标 与 下 标 


sup、sub 


除了 设置 不 同 的 文字 效果 之 外 ， 有 时 候 在 网 页 中 还 需要 设置 一 种 特殊 的 文字 效果 ， 即 上 标 和 下 标 。 
这 在 显示 公式 时 常常 会 出 现 ， 而 在 HTML 语言 中 ， 也 可 以 通过 标记 轻松 地 进行 设置 。 

语法 

<sup>...</sup> “上 标 标 记 

<sub>...</sub> ”下 标 标记 

语法 解释 


在 该 语法 中 ， 上 标 标记 和 下 标 标记 的 使 用 方法 基本 相同 ， 只 需要 将 文字 放 在 标记 中 间 即 可 。 
例 3.7 实例 代码 (实例 位 置 ， 光盘 \TMNslN3\7) 


<html> 

<head> 

<title> 上 标 与 下 标的 效果 </title> 
</head> 


<body> 

在 方程 式 中 应 用 上 标的 效果 <br/> 
X<sup>3</sup>+9X<sup>2</sup>-3=0<br/><br/> 
在 文字 中 应 用 下 标的 效果 <br/> 
3X<sub>1</sub>+2X<sub>2</sub>=10 
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</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 如 图 3.7 所 示 的 效果 。 


全 这 让 训 月 FF 


3.7 设置 文字 的 上 标 与 下 标 
3.2.6 ”设置 删除 线 一 一 strike 


在 网 页 中 可 以 通过 strike 参数 为 文字 添加 删除 线 效果 。 
语法 

<strike> 文 字 </strike> 或 <s> 文 字 </s> 

语法 解释 


这 两 种 标记 都 可 以 创建 删除 线 效果 ， 使 用 起 来 也 很 简单 ， 只 要 把 需要 设置 成 删除 线 效果 的 文字 放 
在 标记 中 间 即 可 。 
例 3.8 实例 代码 〈 实 例 位 置 : 光盘 \TMNsl3\8) 


<html> 

<head> 

<title> 文 字 的 删除 线 效果 </title> 

</head> 

<body> 

正常 的 文字 效果 <br/> 

在 文字 上 使 用 s 标记 来 添加 删除 线 <br/> 
<s> 删 除 文字 的 效果 </s><br/><br/> 

在 文字 上 使 用 strike 标记 来 添加 删除 线 <br/> 
<strike> 删 除 文字 的 效果 </strike> 


[ows ocx| 

正常 的 文字 效果 

在 文字 上 使 用 s 标 记 来 添加 明 除 线 
下 


在 文字 上 使 用 strike 标 记 未 添加 暗 除 线 
者 除 兴 字 的 莹 果 


图 3.8 删除 线 效果 


第 3 章 设计 网 页 文本 内 容 


3.2.7 ”等 宽 文字 标记 


code 


等 宽 文 字 标 记 常 
能 够 使 页 面 显得 更 加 整齐 。 
语法 


<code> 文 字 </code> 
<samp> 文 字 </samp> 


语法 解释 


于 设置 英文 效果 ， 使 用 该 标记 可 以 实现 网 页 中 字体 的 等 宽 效 果 。 使 


等 宽 效 果 


在 该 语法 中 的 这 两 种 标记 都 可 以 实现 文字 的 等 宽 显示 ， 而 在 应 用 时 只 要 把 需要 等 宽 显示 的 文字 放 


置 在 标记 中 间 即 可 。 
例 3.9 实例 代码 (实例 位 置 ， 光盘 \TM\sI3\9) 


<html> 
<head> 
<title> 设 置 等 宽 文字 </title> 
</head> 
<body> 


下 面 将 显示 两 段 相同 的 英文 效果 ， 突 出 等 宽 文字 与 普通 英文 文字 的 对 比 效果 。<br/><br/> 


<!-- 下 面 这 段 英文 使 用 了 正常 的 效果 显示 --> 

普通 英文 效果 <br/> 

A day without sunshine is like night.<br/><br/> 

<!-- 下 面 这 上 段 英文 使 用 了 等 宽 文字 的 效果 显示 --> 

等 宽 文 字 效 果 <br/> 

<code>A day without sunshine is like night.</code> 
</body> 

</html> 


运行 这 段 代 码 ， 可 以 看 到 如 图 3.9 所 示 的 效果 。 


8 osohm DP- ox 


直面 和 示 两 段 相同 的 英文 效果 ， 突 出 等 
的 对 比 效果 。 


宽 文字 与 普通 英文 文字 


A day without sunshine is like night. 


night. 


图 3.9 等 宽 文字 的 效果 
3.2.8 ”空格 一 一 &nbsp; 


一 般 情况 下 ， 在 网 页 中 输入 文字 时 ， 如 果 在 段落 开始 增加 了 空格 ， 


在 使 


浏览 器 进行 浏览 时 往往 
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看 不 到 这 些 空格 。 这 主要 是 因为 在 HTML 文件 中 ， 浏 览 器 本 身 会 将 两 个 句子 之 间 的 所 有 半角 空格 仅 当 
做 一 个 来 看 待 。 如 果 需 要 保留 空格 的 效果 ， 一 般 需 要 使 用 全 角 空 格 符号 ， 或 者 通过 空格 代码 来 代替 。 
下 面 将 介绍 如 何 应 用 空格 代码 来 输入 保留 文字 中 的 空格 效果 。 


语法 
&nbsp; 
语法 解释 


在 网 页 中 可 以 有 多 个 空格 ,一 个 &nbsp; 只 代表 一 个 半角 空格 ， 多 个 空格 则 可 以 多 次 使 用 这 一 符号 。 
例 3.10 实例 代码 (实例 位 置 ， 光盘 \TMIsI\3\10) 


<html> 

<head> 

<title> 输 入 空格 符号 </title> 

</head> 

<body> 

在 段落 开始 输入 空格 符号 的 效果 : <br/> 
&nbsp;&nbsp;&nbsp;&nbsp; 空 格 在 网 页 排版 中 常常 被 应 用 到 ， 使 用 空格 符号 在 文字 的 前 方 输入 几 个 空格 ， 就 可 以 
实现 首 行 缩 进 的 效果 。<br/><br/> 

在 文字 的 中 间 不 使 用 空格 符号 ， 直 接 输 入 6 个 半角 空格 的 效果 : <br/> 

别 裁 伪 体 亲 风雅 ， 转 益 多 师 是 汝 师 <br/><br/> 

使 用 空格 符号 的 效果 : <br/> 

别 裁 伪 体 亲 风雅 ,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 转 益 多 师 是 汝 师 <br/> 
</body> 

</html> 


运行 这 段 代 码 ， 可 以 清楚 地 看 到 不 管 在 两 个 句子 间 输 入 多 少 个 半角 空格 ， 其 中 仅 有 一 个 半角 的 空 


格 符 会 被 接受 ， 其 余 的 空格 符 则 被 忽略 掉 。 而 输入 空格 代码 则 可 以 完整 地 保留 空格 的 效果 ， 如 图 3.10 
所 示 。 


EDwre-lohtml  - x | Sn 和 es 


在 段落 开始 净 入 宁 格 符号 的 效果 ， 
安 格 在 网 贫 于 中 常常 被 应 用 到 作 2 生 4 在 文字 的 前 方 
输入 几 个 裤 格 ， 就 可 以 实现 首 行 缩 进 的 效 


不 使 用 宝 格 符号 ， 直 按 输 入 5 个 半角 宇 格 的 效果 ， 
器 和 雅 ， 转 这 多 师 是 涩 师 


使 用 效 里 ， 
和 和 并 转 益 多 师 是 汝 师 


图 3.10 在 网 页 中 输入 空格 


3.2.9 其 他 特殊 符号 


下 ， 


除了 空格 以 外 ， 在 网 页 的 制作 过 程 中 ， 还 有 一 些 特殊 的 符号 也 需要 使 用 代码 进行 代替 。 一 般 情况 
特殊 符号 的 代码 由 前 级 “&”、 字 符 名 称 和 后 缀 “;” 组 成 。 使 用 方法 与 空格 符号 类 似 ， 具 体 如 


表 3.2 所 示 。 
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表 3.2 ”特殊 符号 的 表示 


NG 
说 明 在 需要 输入 这 些 特殊 符号 的 位 置 ， 使 用 相应 的 代码 代替 即 可 


3.3 设置 段落 格式 


名 1 教学 录像 : 光盘 \TIM\Ix\3\ 设 置 段落 格式 .exe 

文字 属性 的 设 定 前 文 已 经 做 了 介绍 ， 而 把 文字 组 合 起 来 就 形成 了 段落 。 在 文本 编辑 窗 
完 一 段 文 字 后 ， 按 下 Enter 键 就 生成 了 一 个 段落 。 而 在 HTML 中 需要 通过 标记 来 实现 段落 
面具 体 介绍 和 段落 相关 的 一 些 标记 。 


3.3.1 段落 标记 一 一 p 


在 HTML 语言 中 ， 段 落 是 通过 <p> 标 记 来 表示 的 。 

语法 

<p> 段 落 文 字 </p> 

语法 解释 

既 可 以 使 用 成 对 的 <p> 标 记 来 包含 段落 ， 也 可 以 使 用 单独 的 <p> 标 记 来 划分 段落 。 
例 3.11 实例 代码 (实例 位 置 ， 光盘 \TMNsI\3\11) 


<html> 

<head> 

<title> 输 入 段落 文字 </title> 

</head> 

<body> 

<p> 张 而 不 弛 ,文武 弗 能 也 ;</p> 

弛 而 不 张 ,文武 弗 为 也 ,一 张一弛 ,文武 之 道 也 。<p> 
</body> 

</html> 


的 


中 ， 输 入 
效果 ， 下 


S1 


HTML 5 从 入 门 到 精通 


运行 这 段 代 码 ， 可 以 看 到 段落 标记 的 两 种 方法 都 可 以 成 功 地 将 文字 分 段 。 效 果 如 图 3.11 所 示 。 


Cana 
Ga | ow ben pcx| 


张 而 不 弛 ,文武 庄 能 也 
弛 而 不 张 ,文武 诗 为 也 , 一 张 一 屯 , 文武 之 道 也 。 


图 3.11 段落 效果 
3.3.2 ”取消 文字 换行 标记 一 一 nobr 


如 果 浏 览 器 中 单行 文字 过 长 ,浏览 器 会 自动 将 该 文字 换行 显示 ， 如 果 希 望 强制 浏览 器 不 换行 显示 ， 
可 以 使 用 相应 的 标记 。 


语法 
<nobr> 不 换行 显示 的 文字 </nobr> 
语法 解释 


在 标记 之 间 的 文字 在 显示 的 过 程 中 不 会 自动 换行 。 
例 3.12 实例 代码 (实例 位 置 ， 光盘 \TMIsI\3\12) 


<html> 

<head> 

<title> 文 字 不 换行 显示 </title> 
</head> 

<body> 


<!-- 当 浏览 器 宽度 不 够 时 ， 文 本 内 容 会 自动 换行 显示 --> 

World Wide Web 〈(WWW,， 万 维 网 ) 是 一 种 建立 在 Internet 上 的 、 全 球 性 的 、 交 互 的 、 多 平台 的 、 分 布 式 的 信息 
资源 网 络 。 它 采用 HTML 语言 描述 超 文 本 (Hypertext) 文件 。 这 里 所 说 的 超 文本 指 的 是 包含 有 链接 关系 的 文件 ， 
并 且 包含 了 多 媒体 对 象 的 文件 。<p> 

< 上 -下 面 这 段 文字 不 会 自动 换行 显示 ， 当 浏览 器 宽度 不 够 时 ， 会 出 现 滚动 条 --> 

<p><nobr>World Wide Web 〈WWW， 万 维 网 ) 是 一 种 建立 在 Internet 上 的 、 全 球 性 的 、 交 互 的、 多 平台 的 、 分 
布 式 的 信息 资源 网 络 。 它 采用 HTML 语言 描述 超 文本 (Hypertext) 文件 。 这 里 所 说 的 超 文本 指 的 是 包含 有 链接 关 
系 的 文件 ， 并 且 包 含 了 多 媒体 对 象 的 文件 。</nobr></p> 

</body> 

</html> 


运行 这 段 代 码 ， 可 以 看 到 强制 文字 不 换行 的 效果 ， 如 图 3.12 所 示 。 


| [不 换行 标记 <nobr> 的 使 用 
图 3.12 文字 不 换行 的 效果 
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3.3.3 ”换行 标记 


br 


段落 与 段落 之 间 是 隔行 换行 的 ， 这 样 会 导致 文字 的 行 间距 过 大 ， 这 时 可 以 使 用 换行 标记 来 完成 文 


字 的 紧凑 换行 显示 。 
语法 
<br> 
语法 解释 


一 个 <br> 标 记 代 表 一 个 换行 ， 连 续 的 多 个 标记 可 以 多 次 换行 。 
例 3.13 实例 代码 (实例 位 置 ， 光盘 \TMN\sN\3\13) 


<html> 

<head> 

<title> 文 字 的 换行 </title> 

</head> 

<body> 

夷 自 珍 <br/><br/> 

九州 生气 情 风 雷 ， 万 马 齐 嗜 究 可 哀 。<br/> 
我 劝 天 公 重 拌 捕 ， 不 拘 一 格 降 人 才 。<br/> 
</body> 

</html> 


运行 这 段 代码 ， 可 以 看 到 使 用 换行 标记 的 效果 ， 如 图 3.13 所 示 。 


aa mn 


Ba | oanm p- cx| 
区 自 珍 


九州 生气 尾 风 雷 , 万 马 齐 迪 究 可 京 。 
我 荔 天 公 重 村 拔 ， 不 拘 一 格 降 人 才 。 


图 3.13 文字 的 换行 


3.3.4 保留 原始 排版 方式 标记 


pre 


在 网 页 制作 中 ， 一 般 是 通过 各 种 标记 对 文字 进行 排版 的 。 但 是 在 实际 应 用 中 ， 往 往 需 要 一 些 特殊 


的 排版 效果 ， 这 样 使 用 标记 控制 起 来 会 比较 麻烦 。 解 决 的 方法 就 是 保留 文本 格式 的 排版 效果 ， 如 空格 、 


制 表 符 等 。 如 果 要 保留 原始 的 文本 排版 效果 ， 则 需要 使 用 <pre> 标 记 。 
例 3.14 ”实例 代码 〈 实 例 位 置 : 光盘 \TMsI3\14) 


<html> 

<head> 

<title> 保 留 原始 排版 方式 </title> 
</head> 


HTML 5 从 入 门 到 精通 


<body> 
<p> 下 面 是 原始 文字 的 排版 效果 </p> 
<pre> 
m mm Frrrrrrr 
mmmm mm mm FT Frr 
mm mm mm mm rr rr 
mm mm mm mm Frr rrr 
mm mm mm mm Frr rrr 
mm mmm mm Frr rr 
</pre> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 运行 效果 和 文本 中 的 效果 相同 ， 如 图 3.14 所 示 。 


3.14 保留 原始 的 排版 效果 


3.3.5 ”居中 对 齐 标记 


center 


与 普通 文字 类 似 ， 段 落 有 时 候 也 需要 居中 。HTML 语言 提供 了 专门 的 标记 。 
语法 

<center> 文 字 </center> 

语法 说 明 

在 标记 之 间 的 文字 会 自动 居中 显示 。 

例 3.15 实例 代码 〈 实 例 位置 ， 光盘 \TMsI\3\15) 


<html> 

<head> 

<title> 文 字 的 居中 对 齐 </title> 
</head> 

<body> 

<center> 

<p> 汉 乐府 《长 歌 行 》</p> 
百川 东 到 海 , 何 时 复 西 归 ? <br/> 
少壮 不 努力 ,老大 徒 伤 翡 。 
</center> 

</body> 

</html> 
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运行 这 段 代 码 ， 可 以 看 到 这 首 古诗 居中 显示 ， 如 图 3.15 所 示 。 


图 3.15 段落 的 居中 显示 
3.3.6 ”向 右 缩 进 标记 一 一 blockquote 


使 用 <blockquote> 标 记 可 以 实现 页 面 文字 的 段落 缩 进 。 这 一 标记 也 是 每 使 用 一 次 , 段落 就 缩 进 一 次 ， 
可 以 贱 套 使 用 ， 以 达到 不 同 的 缩 进 效果 。 


语法 

<blockquote> 文 字 </blockquote> 

语法 解释 

在 该 标记 之 间 的 文字 会 自动 缩 进 。 

例 3.16 实例 代码 (实例 位 置 ， 光盘 \TM\sI\3\16) 


<html> 
<head> 
<title> 段 落 的 缩 进 效果 </title> 
</head> 
<body> 

《荀子 》 
<blockquote> 不 登高 山 </blockquote> 
<blockquote><blockquote> 不 知 天 之 高 也 </blockquote></blockquote> 
<blockquote><blockquote><blockquote> 不 临 深 溪 </blockquote></blockquote></blockquote> 
<blockquote><blockquote><blockquote><blockquote> 
不 知 地 之 厚 也 </blockquote></blockquote></blockquote></blockquote> 
</body> 
</html> 


在 上 面 的 代码 中 ， 多 次 嵌 套 使 用 了 <blockquote> 标 记 ， 运 行 这 段 代码 效果 如 图 3.16 所 示 。 
DR [EN 
I Err EEC 
《荀子 > 全 
不 登高 山 


不 知 天 之 高 也 


不 临 深 溪 
不 知 地 之 厚 也 


图 3.16 段落 的 缩 进 效果 
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3.4 水 平 线 标记 


名 1 教学 录像 : 光盘 \TIMNIxW3\ 水 平 线 标记 .exe 

水 平 线 用 于 段落 与 段落 之 间 的 分 隔 ， 使 文档 结构 清晰 明白 ， 文 字 的 编排 更 整齐 。 水 平 线 自身 具有 
很 多 的 属性 ， 如 宽度 、 高 度 、 颜 色 、 排 列 对 齐 等 。 在 HTML 文档 中 经 常会 用 到 水 平 线 ， 合 理 使 用 水 了 
线 可 以 获得 非常 好 的 效果 。 一 篇 内 容 繁 杂 的 文档 ， 如 果 合理 放置 几 条 水 平 线 ， 就 会 变 得 层次 分 明 ， 便 
于 阅读 。 


3.4.1 ”添加 水 平 线 一 一 hr 


语法 
<hr> 
语法 解释 


在 网 页 中 输入 一 个 <hr> 标 记 ， 就 添加 了 一 条 默认 样式 的 水 平 线 。 
例 3.17 实例 代码 (实例 位 置 ， 光盘 \TMIsI\3\17) 


<html> 

<head> 

<title> 添 加 水 平 线 </title> 

</head> 

<body> 

<center><h4> 编 程 词典 个 人 版 </h4></center> 

<hr> 

编程 词典 个 人 版 是 一 套 学 、 查 、 用 为 一 体 的 数字 化 学 习 编 程 软件 。 科 学 的 学 习 模 式 、 系 统 的 学 习 方案 ， 实 现 快速 
学 习 、 快 速 提高 ， 真 正 做 到 理论 与 实践 相 结 合 。 海 量 的 数据 资源 ， 帮 助 您 解决 在 学 习 编程 语言 中 遇 到 的 问题 。 丰 
富 的 实战 资源 ， 包 括 视频 、 应 用 范例 、 模 块 和 项 目 源码 ， 既 能 够 作为 学 习 的 资料 ， 也 可 以 应 用 到 实战 中 。 
</body> 

</html> 


运行 这 段 代 码 ， 可 以 看 到 在 网 页 中 出 现 了 一 条 水 平 线 ， 如 图 3.17 所 示 。 


aaa ccxlsacre | 
编程 词 皂 个 人 版 


用 为 一 体 的 数字 化 学 习 编程 软件 。 科 学 的 学 习 柑 式 、 系 
人 和 海量 的 数据 次 
到 的 问题 战 帘 和 和 师 、 应 用 范 


3.17 ”添加 水 平 线 
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3.4.2 ”设置 水 平 线 的 宽度 与 高 度 一 一 width、height 


在 默认 情况 下 ， 在 网 页 中 插入 的 水 平 线 是 100% 的 宽度 ，1 像素 的 高 度 。 而 在 实际 创建 网 页 时 ， 可 
以 对 水 平 线 的 宽度 和 高 度 进行 设置 。 

语法 

<hr width=" 水 平 线 宽度 ” height=" 水 平 线 高 度 "> 

语法 解释 


在 该 语法 中 ， 水 平 线 的 宽度 值 可 以 是 确定 的 像素 值 ， 也 可 以 是 窗口 宽度 值 的 百分比 。 而 水 平 线 的 
高 度 值 则 只 能 够 是 像素 值 。 如 果 在 创建 水 平 线 时 只 设置 一 个 参数 ， 那 么 另外 一 个 参数 则 会 取 默 认 值 。 
例 3.18 实例 代码 〈 实 例 位 置 ， 光 盘 \TMNsI3\18) 


<html> 

<head> 

<title> 设 置 水 平 线 大 小 </title> 

</head> 

<body> 

<center> 

<font face=" 隶 书 " size="+4"> 醉 花 阴 </font> 

<hr width="130"> 

<font size="+3"> 李 清 照 </font> 

</center> 

<hr width="85%" size="3"> 
<p>&nbsp;&nbsp;&nbsp;&nbsp; 薄 雾 浓 云 愁 永 层 ， 瑞 脑 销 金 兽 。<br/> 
&nbsp;&nbsp;&nbsp;&nbsp; 佳 节 又 重阳 ， 玉 枕 纱 橱 ， 半 夜 凉 透彻 <br/> 
&nbsp;&nbsp;&nbsp;&nbsp; 东 篇 把 酒 黄昏 后 ， 有 了 暗 香 盈 袖 <br /> 
&nbsp;&nbsp;&nbsp;&nbsp; 莫 道 不 消魂 ， 帘 卷 西 风 ， 人 比 黄花 瘦 。</p> 


<hr size="5"> 


运行 这 段 代码 ， 可 以 看 到 3 条 高 度 和 宽度 不 等 的 水 平 线 效果 ， 如 图 3.18 所 示 。 


葛 雪 浓 云 秋 永 显 ， 瑞 及 销 全 曾 。 
佳节 又 重阳 ， 王 枕 纱 粒 ， 半 栅 计 和 条 
东营 扫 机 音 氏 后， 有 请 香 脉 宰 

其 刘 丰 消 哎 ， 宙 着 西 风 ， 人 比 黄花 并 


图 3.18 设置 水 平 线 宽度 和 高 度 


S7 
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3.4.3 ”设置 水 平 线 的 颜色 一 一 color 


为 了 使 水 平 线 更 加 美观 ， 同 整体 页 面 更 加 协调 ， 可 以 设置 水 平 线 的 颜色 。 
语法 

<hr color=" 颜 色 代码 "> 

语法 解释 


颜色 代码 是 十 六 进 制 的 数值 。 
例 3.19 实例 代码 (实例 位 置 ， 光盘 \TMINsI3\19) 


<html> 

<head> 

<title> 设 置 水 平 线 的 颜色 </title> 

</head> 

<body> 

<center><font face=" 隶 书 " size="+5" color="#0066FF"> 吉 林 省 明日 科技 有 限 公 司 </center> 

<hr width="220" size="3" color="#FFCC00"> 

<p> 

吉林 省 明日 科技 有 限 公 司 是 一 家 以 计算 机 软件 技术 为 核心 的 高 科技 型 企业 ， 公 司 创建 于 2000 年 12 月 ， 是 专业 的 
应 </p> 

<!-- 省 略 部 分 代码 --> 

<p><strong> 企 业 宗旨 </strong>: 为 企业 服务 ， 打 造 企业 智能 管理 平台 ， 改 善 企业 的 管理 与 运作 过 程 ， 提 高 企业 
效率 ， 降 低 管理 成 本 ， 增 </p> 

<p> 强 企业 核心 竞争 力 。 为 企业 快速 发 展 提供 源 动力 。</p> 

<p ><strong> 企 业 精神 </strong>: 博学 、 创 新 、 求 实 、 笃 行 </p> 

<p><strong> 公 司 理念 </strong>: 以 高 新 技术 为 依托 ， 战 略 性 地 开发 具有 巨大 市 场 潜力 的 高 价值 的 产品 。</p> 
<p ><strong> 公 司 远景 </strong>: 成 为 拥有 核心 技术 和 核心 产品 的 高 科技 公司 ， 在 某 些 领域 具有 领先 的 市 场地 位 。 


</p> 

<p ><strong> 核 心 价值 观 </strong>: 永 葆 创业 激情 、 每 一 天 都 在 进步 、 容 忍 失 败 ， 鼓 励 创新 、 充 分 信任 、 平 等 交 
流 。</p> 

<hr size="5" color="#33FFFF"> 

</body> 

</html> 


运行 这 段 代 码 ， 可 以 看 到 颜色 和 大 小 不 同 的 两 条 水 平 线 ， 而 这 两 条 水 平 线 将 文章 的 主体 映衬 得 更 


加 醒目 ， 如 图 3.19 所 示 。 
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EEC 


吉本 日 科 护 有 了 公司 是 一 守节 村 什 技 本 的 训 科技 开 全 业 ， 全 司 地 建 于 208 和 月， 是 二 的 应 
丽人 开 志和 而 和 近代 商 。 地 年 下 力 卫生 管 和 件 开 坦 、 雪 字 化 二 具 特 开 必 玫 、 寺 生机 络 系 缠 症 
和 本 和 天机 红 村 县 生 产 .管理 拉 抽 。 记 下 各 、 全 杀 、 生生 . 公司 所 有 半生 
大 和 方面 和 冯 志 和 学习 拉夫 。 公司 的 开发 了 不 人 是 开 和 的 村 村， 更 路 力 于 为 村 
才 交 本 和 全 寿 ， 并 [村 件 工本 全 下 立 T 斩 伯 上 和 前 全 务 体系 。 公司 基 攻 拉夫 人 
和 志 午 让 训 F 恰 工作， 网关 网” 的 这 上 休 ， 劳力 晕 ” 专业 是 用、 大 对 ” 产 品 
1， 攻 三 大 用 户 代 代 抽 产品 和 县 有 。 

企业 家 提 ， 为 化 村 务 ， 厅 直 企 化合 管 理 下 如， 玲 和 全 人 的 管 旭 与 王 人 过 程 ， 让 全 生计 刘 ， 洗 全 旭 成 本 ， 增 
HL 补 力 。 和 企业 人 上 展 闻 人力- 

让 业 和 神情 守节、 民生 

从 本 玫 ， 以 接手 籽 开 委 具有 大 太志 轴 闪 的 产 和 

公司 开 太 凶 有 针 村 不 和 护 产 品 本 和 持 和 司 ， 丰 得志 有 有 印记 地 位， 

要 协和 向 未 厅 训 人 和 情 每天 部 在 过 和， 音 兴 灶 对 于 折 友信 任 、 二 科 清 


图 3.19 设置 水 平 线 的 颜色 
3.4.4 设置 水 平 线 的 对 齐 方式 一 一 align 


通过 前 面 几 个 实例 可 以 看 到 ， 水 平 线 在 默认 情况 下 是 居中 对 齐 的 。 如 果 和 希望 水 平 线 左 对 齐 或 右 对 
齐 ， 就 需要 使 用 align 参数 。 

语法 

<hr aligh= 对 齐 方式 > 

语法 解释 


在 该 语法 中 包括 left、center 和 right 3 种 对 齐 方式 。 其 中 ，center 的 效果 与 默认 效果 相同 。 
例 3.20 ”实例 代码 (实例 位 置 : 光盘 \TM\sN3\20) 


<html> 

<head> 

<title> 设 置 水 平 线 对 齐 方 式 </title> 

</head> 

<body> 

<font face=" 隶 书 " size="+3" color="#FF6600"> 苏 轼 </font> 
<hr width="130" color="#996600" align="left"> 

古 之 成 大 事 者 ,不 改 有 超 士 之 才 , 亦 有 坚忍 不 拔 之 志 。 

<p align="right"> 大 家 要 牢记 啊 ! 

<hr size="2” width="120" color="#FF99CC" align="right"> 
</body> 

</html> 


运行 这 段 代 码 ， 可 以 看 到 分 别 位 于 左边 和 右边 的 不 同 效果 的 水 平 线 ， 如 图 3.20 所 示 。 


i 和 


-<a ei 
Er Er 


上 十 之 成 大 要 埋 ,不 恬 有 超 士 之 才 , 刘 有 宇 民 不 拱 之 志 。 
大 家 要 牢记 顺 1 


图 3.20 设置 水 平 线 的 对 齐 方式 


3.4.5 ”去 掉 水 平 线 阴影 
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noshade 


在 默认 情况 下 ， 水 平 线 是 空心 带 阴影 的 立体 效果 ， 通 过 设置 noshade 参数 可 以 将 水 于 
语法 

<hr noshade="noshade"/> 

例 3.21 实例 代码 (实例 位 置 ， 光盘 \TMNsI3\21) 


<html> 

<head> 

<title> 去 掉 水 平 线 的 阴影 </title> 

</head> 

<body> 

<center> 

<font face=" 隶 书 " size="+3" color="#00FF00"> 老 子 </font></center> 
<hr width="130" size="4" > 

<p align="center"> 信 言 不 美 ， 美 言 不 信 。 善 者 不 辨 ， 辩 者 不 善 </p> 
<hr size="3" noshade="noshade"/> 

</body> 

</html> 


运行 这 段 代 码 ， 可 以 看 到 如 图 3.21 所 示 的 效果 ， 上 面 的 水 平 线 是 空心 带 阴影 的 立体 效果 ， 而 下 


F 线 的 阴影 去 掉 。 


的 水 平 线 是 通过 noshade 参数 将 阴影 去 掉 的 水 平 线 。 


3.5.1 文字 标注 标记 


在 


CE ewes2nm p- ox | © axrenme 


老子 


信 言 不 美美 言 不 信 , 善 者 不 状 , 捧 者 不 蔷 


图 3.21 去 掉 水 平 线 阴影 的 效果 


3.5 ”其 他 文字 标记 


ruby 


E 网 页 中 可 以 通过 添加 对 文字 的 标注 来 解释 说 明 网 页 中 的 某 段 文字 。 


加 
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语法 

<ruby> 
被 说 明 的 文字 
<rt> 
文字 的 标注 
</Irt> 

</ruby> 


语法 解释 
被 说 明 的 文字 就 是 网 页 中 需要 添加 标注 的 那 段 文字 ， 而 文字 的 标注 则 是 真正 的 说 明文 字 。 
例 3.22 实例 代码 (实例 位 置 ， 光盘 \TMN\sN\3\22) 


<html> 

<head> 
<title> 添 加 文字 标注 </title> 
</head> 

<body> 

<ruby> 

有 情 芍药 含 春 泪 ， 无 力 蔷薇 卧 晓 枝 。<br /><br /> 
<rt> 

作者 秦 观 

</rt> 

</ruby> 

</body> 

</html> 


运行 这 段 代 码 ， 可 以 在 古诗 的 上 面 看 到 标注 文字 “作者 秦 观 ”， 如 图 3.22 所 示 。 
PF ll) 
r 
有 情 六 药 二 宕 泪 . 天 力 茵 区 名 暗 核 。 


图 3.22 ”添加 标注 文字 


/ 
于 培 明 在 默认 情况 下 ， 标 注 文字 很 小 ， 但 是 在 HTML 中 也 可 以 像 设置 其 他 文字 一 样 调整 标注 文 
字 的 各 种 属性 ， 包 括 大 小 、 颜 色 等 。 


3.5.2 ”声明 变量 标记 


Var 


在 使 用 网 页 讲解 某 些 知识 时 ， 为 了 统一 地 突出 变量 ， 常 常 将 其 设置 为 斜体 。 而 在 HTML 中 也 提供 
了 一 种 标记 ， 用 于 设置 变量 的 效果 。 


语法 
<var> 变 量 </var> 
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3.5.3 忽视 HTML 标记 
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语法 解释 


在 标记 之 间 的 文字 就 以 声明 变量 的 效果 显示 。 
例 3.23 实例 代码 (实例 位 置 ， 光盘 \TMNsI3\23) 


<html> 

<head> 

<title> 声 明 变量 标记 </title> 

</head> 

<body> 

<p> 所 谓 的 定义 变量 就 是 给 变量 赋值 。</p> 
定义 变量 的 格式 为 : <br> 

变量 名 : 数值 或 者 表达 式 的 值 。<br> 

其 中 符号 “:=” 是 定义 符 ， 又 称 赋值 符 。<br> 


<p> 例 如 定义 变量 <var>x</var> 的 值 为 <var>y+6</var>, 可 以 表示 为 : </p> 


<p><var>x</var>:=<var>y</var>+6 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 如 图 3.23 所 示 的 效果 。 


所 谓 的 定义 交 量 
定义 变量 的 格式 为 ， 
名 , 数 弛 3 


变 重 各， 数值 
其 中 符号 


例如 定义 变量 :的 值 为 >-6 可 以 表示 为 ， 


=r6 


图 3.23 ”声明 变量 


忽视 HTML 标记 主要 是 用 来 使 HTML 标记 失去 作 


目 并 不 多 。 


语法 
<plaintext> 或 <xmp> 
语法 解释 


plaintext、xmp 


， 而 直接 显示 在 页 


中 。 这 一 标记 在 实际 中 应 


这 两 个 标记 中 的 任何 一 个 如 果 加 入 到 HTML 代码 中 ， 都 会 使 HTML 标记 失去 作用 ， 一 般 放 置 在 
<body> 标 记 之 后 。 


例 3.24 实例 代码 (实例 位 置 ， 光盘 \TMNsI3\24) 


<html> 
<head> 


<title> 忽 视 HTML 标签 标记 </title> 

</head> 

<body> 

<plaintext> 

<!- 作 者 管子 -> 

<p> 一 年 之 计 ， 莫 如 树 谷 ; 十 年 之 计 ， 莫 如 树木 ; 百年 之 计 ， 莫 如 树 人 。</p> 
</body> 

</html> 


运行 这 段 代 码 的 效果 如 图 3.24 所 示 。 


E FAppSe\mmw\r 只 * OX | omHMUa 
文件 们 志 二 E) 可 看 VI 收 大 天。 工具 [大风 (H) 


一 作者 管子 >》 
生计 ,下村 全 年 之 ,机 如 村: 百年 之 计 , 菇 如 村 人 <p 
ees 
图 3.24 忽视 HTML 标记 的 作用 
3.6 小 结 


本 章 主要 讲解 了 如 何 对 文字 以 及 段落 进行 设置 。 文 字 是 网 页 设计 最 基础 的 部 分 ， 一 个 标准 的 文字 
页 面 可 以 起 到 传达 信息 的 作用 。 通 过 本 章 的 学 习 ， 读 者 可 以 设置 文字 格式 、 段 落 格 式 以 及 水 平 线 标记 。 
在 熟悉 和 掌握 了 各 个 知识 点 后 ， 读 者 可 以 在 HTML 中 设置 个 性 的 文字 样式 。 


3.7 习 题 
选择 题 
1. HTML 文本 显示 状态 代码 中 <sup>...</sup> 表 示 ( bp 
A. 文本 加 注 下 标 B. 文本 加 注 上 标 
C. 文本 闪烁 D. 文本 或 图 片 居 中 
2. 创建 最 小 的 标题 的 文本 标记 是 ( ) 。 
A. <pre>...</pre> B. <hl>...</h1l> 
C. <h6>...</h6> D. <b>...</b> 
3. 创建 黑体 字 的 文本 标记 是 ( 。 ) 。 
A. <pre>...</pre> B. <hl>...</hl> 
C. <h6>...</h6> D. <b>...</b> 
4. 设置 水 平 线 高 度 的 HTML 代码 是 (  )。 
A. <hr> B. <hr size=?> 
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C. <hr width=2> D. <hrnoshade> 
5. 在 HTML 中 ， 下 面 是 段落 标记 的 是 (  ) 。 
A. <html>...</html> B. <head>...</head> 
C. <body>...</body> D. <p>...</p> 
6. HTML 代码 <hr width=?> 表 示 ( 。 )。 
A. 设置 水 平 线 的 高 度 B. 设置 水 平 线 的 宽度 
C. 创建 一 个 没有 阴影 的 水 平 线 D. 创建 任意 水 平 线 
判断 题 


7. 在 HTML 的 段落 标记 中 ， 标 注 文本 以 原样 显示 的 是 <pre>.…</pre>。 ( 
8. 在 HTML 中 ， 空 格 的 代码 为 &nbsp;。 ( ) 
9. 标记 <b> 无 须 </b> 标 记 。 ) 


填空 题 
10. 要 设置 一 条 1 像素 粗 的 水 平 线 ， 应 使 用 的 HTML 语句 是 


第 


世 


使 用 列表 


( 姬 教学 录像 : 35 分 钟 ) 


列表 (List) 是 一 种 非常 实用 的 数据 排列 方式 ， 它 以 条 列 的 形式 来 显示 数据 ， 
使 读者 能 够 一 日 了 然 。 在 HTML 中 有 3 种 列表 , 分别 是 无 序列 表 (Unordered Lists)、 
有 序列 表 (Ordered Lists) 和 定义 列表 (Definition Lists)。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


ad 


了 解 3 种 列表 的 标记 
掌握 定义 列表 标记 

掌握 菜单 列表 标记 

掌握 目录 列表 

熟练 掌握 列表 的 高 级 应 用 
了 解 列表 的 岩 套 
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4.1 列表 的 标记 


车 4 教学 录像 : 光盘 \TM\IxM4\ 列 表 的 标记 .exe 

列表 分 为 3 种 类 型 ， 包 括 无 序列 表 、 有 序列 表 和 定义 列表 。 无 序列 表 使 用 项 目 符号 来 标记 无 序 的 
项 目 ， 而 有 序列 表 则 使 用 编号 来 记录 项 目的 顺序 。 有 关 定 义 列表 的 内 容 将 在 后 面 的 章节 中 详细 介绍 。 

所 谓 无 序 ， 是 指 以 @、O 〇 、V 、 人 A 等 开头 的 ， 没 有 顺序 的 列表 项 目 ， 如 图 4.1 所 示 的 列表 。 

所 谓 有 序 ， 是 指 按 照 数 字 或 字母 等 顺序 排列 列表 项 目 ， 如 图 4.2 所 示 的 列表 。 


|S oa-thm p- ox |S sn [ee voinm p= ox| 


图 4.1 无 序列 表 图 4.2 有 序列 表 
关于 列表 的 主要 标记 ， 如 表 4.1 所 示 。 


表 4.1 列表 的 主要 标记 
| 定 xa 表 上 | 


菜单 列表 
定义 列表 的 标记 
列表 项 目的 标记 


4.2 使 用 无 序列 表 


锅 4 教学 录像 : 光盘 \TMNIxV4\ 使 用 无 序列 表 .exe 
在 无 序列 表 中 ， 各 个 列表 项 之 间 没 有 顺序 级 别 之 分 ， 它 通常 使 用 一 个 项 目 符号 作为 每 个 列表 项 的 
前 级 。 无 序列 表 主要 使 用 <ul>、<dir>、<dl>、<menu>、<l 放 等 标记 和 type 属性 。 


4.2.1 无 序列 表 标 记 


ul 


无 序列 表 的 特征 在 于 提供 一 种 不 编号 的 列表 方式 ， 而 在 每 一 个 项 目 文字 之 前 ， 以 符号 作为 分 项 
标记 。 
语法 
<ul> 
<li> 第 1 项 </li> 


第 4 章 使 用 列表 
<li> 第 2 项 </li> 
</ul> 加 
语法 解释 


在 该 语法 中 , 使 用 <ul>...</ul> 标 记 表 示 这 一 个 无 序列 表 的 开始 和 结束 , 而 <li> 则 表示 这 是 一 个 列表 
项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 。 
例 4.1 实例 代码 (实例 位 置 光盘 \TMN\sI4\1) 


<head> 

<title> 创 建 无 序列 表 </title> 

</head> 

<body> 
<font size="+3" color="#0066FF"> 编 程 词 典 的 模式 分 类 : </font><br/><br/> 
<ul> 
<Ii> 入 门 模式 </li> 
<li> 初 级 模式 < 川 > 
<li> 中 级 模式 </li> 
</ul> 

</body> 

</html> 


编程 词典 的 模式 分 类 


* 人 入门 模式 
* 初级 模式 
。 中 级 模式 


图 4.3 创建 无 序列 表 
4.2.2 无 序列 表 的 符号 类 型 一 一 type 


默认 情况 下 ， 无 序列 表 的 项 目 符号 是 @@， 而 通过 type 参数 可 以 调整 无 序列 表 的 项 目 符号 ， 避 免 列 
表 符 号 的 单调 。 
语法 


<ul type=" 符 号 类 型 "> 
<li> 第 1 项 </li> 
<li> 第 2 项 </li> 


</ul> 
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语法 解释 


在 该 语法 中 ， 无 序列 表 其 他 的 属性 不 变 ，type 属性 则 决定 了 列表 项 开始 的 符号 。 它 可 以 设置 的 值 
有 3 个 ， 如 表 4.2 所 示 。 其 中 disc 是 默认 的 属性 值 。 


表 4.2 无 序列 表 的 符号 类 型 


类 型 值 列表 项 目的 符号 


disc | © 
circle | O 〇 
square 加 


例 4.2 实例 代码 (实例 位 置 ， 光盘 \TM\sI42) 


<html> 
<head> 
<title> 创 建 无 序列 表 </title> 
</head> 
<body> 
<font size="+3" color="#00FF99"> 明 日 科技 部 门 分 布 : </font><br/><br/> 
<ul type="circle"> 
<li> 图 书 开 发 部 </li> 
<Ii> 软 件 开发 部 </li> 
<li> 质 量 部 </li> 
<li> 财 务 部 </li> 
</ul> 
<hr color="#3300FF" size="2" /> 
<font size="+3" color="#00FFFF"> 图 书 开发 部 分 布 : </font><br/><br/> 
<ul type="disc"> 
<li>PHP 部 </li> 
<li>ASP.NET 部 </li> 
<li>C#</li> 
<li>JAVA</li> 
</ul> 
</body> 
</html> 


运行 这 段 代码 ,可 以 看 到 除了 默认 的 列表 项 目 符号 之 外 ,还 显示 了 另外 一 种 列表 项 目 符号 的 效果 ， 
如 图 4.4 所 示 。 


也 可 以 在 <li> 项 中 定义 无 序列 表 的 类 型 ， 其 语法 是 <li type= 符 号 类 型 >， 这 样 定义 的 结果 是 对 单个 
项 目 进行 定义 ， 实 例 代 码 如 下 所 示 。 


<html> 

<head> 
<title> 创 建 无 序列 表 </title> 
</head> 

<body> 


<font size="+3" color="#00FF99"> 明 日 科技 部 门 分 布 : </font><br/> 
<ul> 
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<litype="circle"> 图 书 开 发 部 </li> 
<litype="disc"> 软 件 开发 部 </li> 
<litype="square"> 质 量 部 </li> 
</ul> 


运行 这 段 代码 ， 效 果 如 图 4.5 所 示 。 


CIO wanm po x] sais 
明日 科技 部 门 分 布 : 


* 图 书 开发 部 
* 软件 开发 部 
质量 部 


:财务 部 
图 书 开 发 部 分 布 : 


cal rr 
明日 科技 部 门 分 布 : 让 


，PHP 部 
，ASP. NET 部 
JAVA 


4.4 设置 无 序列 表 项 目 符号 


4.3 使 用 有 序列 表 


区 1 教学 录像 : 光盘 \TIM\Ix\4\ 使 用 有 序列 表 .exe 
有 序列 表 使 用 编号 来 编排 项 目 ， 而 不 是 项 目 符号 。 列 表 中 的 项 目 采 用 数字 或 英文 字母 开头 ， 通 常 
各 项 目 间 有 先后 的 顺序 性 。 在 有 序列 表 中 ， 主 要 使 用 <ol> 和 <li> 两 个 标记 以 及 type 和 start 两 个 属性 。 


4.3.1 ”有 序列 表 标记 一 一 ol 


有 序列 表 中 ， 各 个 列表 项 使 用 编号 而 不 是 项 目 符号 来 进行 排列 。 列 表 中 的 项 目 通常 都 有 先后 顺序 
一 般 采 用 数字 或 者 字母 作为 顺序 号 。 
语法 
<ol> 
<li> 第 1 项 </li> 


<Ii> 第 2 项 </li> 
<li> 第 3 项 </li> 


国 


</ol> 
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语法 解释 


在 该 语法 中 , <o> 和 </ol> 标 记 标志 着 有 序列 表 的 开始 和 结束 , 而 <li> 标 记 表 示 这 是 一 个 列表 项 的 开 
默认 情况 下 ， 采 用 数字 序号 进行 排列 。 
例 4.3 实例 代码 〈 实 例 位 置 : 光盘 \TMINsIM4\3) 


<html> 

<head> 

<title> 创 建 有 序列 表 </title> 

</head> 

<body> 

<font size="+4" color="#CC6600"> 江 雪 </font><br/> 

<ol> 
<Ii> 千 山 鸟 飞 绝 </li> 
<Ii> 万 径 人 踪 灭 </li> 
<li> 玩 舟 革 答 篇 </li> 
<li> 独 钓 寒 江 雪 < 川 > 


敬 


运行 这 段 代 码 ， 可 以 看 到 序列 前 面包 含 了 顺序 号 ， 如 图 4.6 所 示 。 


[owtnm ocx] 


© I 


和 人 踪 灭 
3， 扳 舟 鞭 笠 欧 
4 独 钓 塞 江 雪 


图 4.6 有 序列 表 
4.3.2 ”有 序列 表 的 属性 一 一 type 


默认 情况 下 ， 有 序列 表 的 序号 是 数字 ， 通 过 type 属性 可 以 调整 序号 的 类 型 ， 如 将 其 修改 为 字母 等 。 
语法 
<ol type=" 序 号 类 型 "> 
<Ii> 第 1 项 </li> 
<li> 第 2 项 </li> 
<li> 第 3 项 </I> 
5 RE 


语法 解释 
在 该 语法 中 ， 序 号 类 型 可 以 有 5 种 ， 如 表 4.3 所 示 。 
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表 4.3 ”有 序列 表 的 序号 类 型 


tpeg 值 [| 让 bs 型 | 
1 | 数字 1，2，3，4.… 

a | 小 写 英文 字母 a,b, c,d..… 

A 大 写 英文 字母 A，B,C, D..… 

1 


小 写 罗马 数字 i， 让 ， 刘 ，iv.…. 
大 写 罗 马 数字 I，II，III，IV.…. 
例 4.4 实例 代码 〈 实 例 位 置 : 光盘 \TM\s14\4) 


<html> 
<head> 
<title> 创 建 有 序列 表 </title> 
</head> 
<body> 
<font size="+3" color="#00FFCC"> 测 试 : 你 懂得 享受 生活 吗 ? </font><br/><br/> 
家 里 装修 完毕 ， 又 新 添置 一 套 高 级 音响 ， 你 会 把 豪华 漂亮 的 音响 放 在 哪里 ?<br/> 
<oltype="A'> 
<li> 卧 室 </li><br/> 
<li> 客 厅 </li><br/> 
<Ii> 餐 厅 </li><br/> 
<li> 浴 室 </li><br/> 
</ol> 
<hr size="2" color="#0099FF"> 
<ol type="|"> 
<Ii> 卧 室 :喜欢 拥有 自己 的 私人 空间 ， 生 活 的 快乐 更 多 来 自 于 内 心 世界 </ii><br/> 
<Ii> 客 厅 : 喜 欢 热闹 ， 异 性 缘 佳 </li><br/> 
<li> 餐 厅 : 享 受 亲情 ， 家 庭 始 终 放 在 你 的 第 一 位 ， 任 何 快乐 的 事 ， 你 都 希望 能 和 家 人 一 起 分 享 。</li><br/> 
<li> 浴 室 : 对 生活 细节 极度 迷恋 ， 生 活 即 享受 的 观点 早已 深入 你 心 。</li><br/> 
</ol> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 实现 有 序列 表 的 不 同类 型 的 序号 排列 ， 如 图 4.7 所 示 。 


Be Or mr EC COC 


和 宛 ， 久 亲征 直 人生 ， 作 人 提问 的 站 在 
本 

1 杀 

CR 


图 4.7 有 序列 表 的 类 型 
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4.3.3 ”有 序列 表 的 起 始 数值 一 一 start 


默认 情况 下 ， 有 序列 表 的 列表 项 是 从 数字 1 开始 的 ， 通 过 start 参数 可 以 调整 起 始 数值 。 这 个 数值 
可 以 对 数字 起 作用 ， 也 可 以 作用 于 英文 字母 或 者 罗马 数字 。 


语法 


<ol start=" 起 始 数值 "> 
<li> 第 1 项 </li> 
<li> 第 2 项 </li> 
<li> 第 3 项 </l> 


</ol> 
语法 解释 


在 该 语法 中 ， 不 论 列表 编号 的 类 型 是 数字 、 英 文字 母 还 是 罗马 数字 ， 起 始 数值 只 能 是 数字 。 
例 4.5 实例 代码 〈 实 例 位 置 : 光盘 \TM\sIM4\5) 


<html> 
<head> 
<title> 有 序列 表 的 起 始 值 </title> 
</head> 
<body> 
<font size="4" color="#00FFFF"> 长 春 的 旅游 景点 : </font><br/> 
<ol start="3"> 
<li> 长 春 净 月 潭 森林 公园 </li><br/> 
<li> 长 春 伪 皇宫 博物 馆 </li><br/> 
<Ii> 长 影 世 纪 城 </li><br/> 
</ol> 
<hr size="4" color="#3300FF"> 
<font size="+3" color="#0099FF"> 每 周 的 安排 </font><br/> 
<ol type="A" start="4"> 
<li> 周 四 煮 一 顿 大 餐 < 咱 ><br> 
<li> 周 五 看 一 场 电影 < 川 ><br/> 
<Ii> 周 六 回 家 陪 父母 吃饭 </li><br/> 
</ol> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 4.8 所 示 ， 其 中 定义 了 不 同 的 起 始 编号 。 
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3 长 春 净 月 潭 森林 公园 
4 长 春 伪 皇 富 等 物 馆 
5. 长 影 世纪 城 


每 周 的 安排 
D 周 四 者 一 师 大 均 
下 周 五 看 一 场 电影 
有 周 六 回 家 院 父母 吃饭 


图 4.8 人 
4.4 定义 列表 标记 一 一 dl 


区 教学 录像 ， 光盘 \TM\Ix\4\ 定 义 列表 标记 .exe 
在 HTML 中 还 有 一 种 列表 标记 ， 称 为 定义 列表 (Definition Lists) 。 不 同 于 前 两 种 列表 ， 它 主要 用 
于 解释 名 词 ， 包 含 两 个 层次 的 列表 ， 第 一 层次 是 需要 解释 的 名 词 ， 第 二 层次 是 具体 的 解释 。 
语法 
<dl> 
<dt> 名 词 1<dd> 解 释 1 


<dt> 名 词 2<dd> 解 释 2 
<dt> 名 词 3<dd> 解 释 3 


</dl> 

语法 解释 

在 该 语法 中 ，<dl> 标 记 和 </dl> 标 记分 别 定义 了 定义 列表 的 开始 和 结束 ，<dt> 后 面 就 是 要 解释 的 名 

称 ， 而 在 <dd> 后 面 则 添加 该 名 词 的 具体 解释 。 作 为 解释 的 内 容 在 显示 时 会 自动 缩 进 ， 有 些 像 字典 中 的 

词语 解释 。 
例 4.6 实例 代码 (实例 位 置 ， 光盘 \TMNsl4\6) 


<html> 
<head> 
<title> 创 建 定义 列表 </title> 
</head> 
<body> 
<font color="#00FFCC"> 如 果 可 以 让 你 有 一 种 超 能 力 ， 你 会 想 要 有 哪 一 种 ?</font><br/> 
<ol type="A"> 
<li> 穿 越 时 光 术 </li><br/> 
<Ii> 隐 形 透 明 术 </li><br/> 
<Ii> 神 秘 读 心 术 </li><br/> 
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<Ii> 青 春 不 老 术 </li><br/> 
</ol> 
<hr color="#00FFCC" size="3"/> 
<dl> 

<dt>A: 穿 越 时 光 术 </dt><dd> 你 的 时 间 都 浪费 在 发 呆 、 胡 思 乱 想 、 做 白 日 梦 : 这 类 型 的 人 个 性 很 被 动 ， 想 法 
天 马 行 空 ， 可 是 都 只 限于 想 而 不 实际 行动 。</dd><br/> 

<dt>B: 隐 形 透明 术 </dt><dd> 你 的 时 间 都 浪费 在 看 电视 、 上 网 里 看 一 通 : 这 类 型 的 人 个 性 内 向 不 喜欢 跟 人 有 实 
际 上 的 接触 ， 凡 事 都 跟 人 保持 距离 ， 不 喜欢 成 为 注目 的 焦点 ， 宁 愿 躲 在 一 边 自己 做 自己 的 事情 ， 但 是 都 跟 正事 无 
关 。</dd><br/> 

<dt>C: 神 秘 读 心术 </dt><dd> 你 的 时 间 都 浪费 在 打牌 、 讲 电话 、 闲 聊 八卦 : 这 类 型 的 人 好 奇 心 很 强 ， 喜 欢 吸 收 
不 同 的 信息 ， 包 括 八 卦 ， 是 一 个 小 型 的 广播 电台 ， 而 且 很 喜欢 到 处 哈 拉 ， 常 常 跟 朋 友 讲 八卦 讲 到 电话 线 都 快 烧 掉 
了 ， 要 注意 ， 你 的 电话 费 可 能 常常 会 暴 增 喔 !</dd><br> 

<dt>D: 青 春 不 老 术 </dt><dd> 你 的 时 间 都 浪费 在 逛街 、 照 镜子 、 保 养 身 材 : 这 类 型 的 人 非常 的 自 恋 ， 他 认为 把 
自己 打扮 的 美美 的 是 一 件 很 开心 的 事情 ， 而 且 认 为 自己 真 的 就 是 这 么 的 美丽 ， 永 远 保持 美貌 感觉 是 很 棒 的 ， 根 据 
很 多 统计 喜欢 自拍 、 喜 欢 照 镜子 … 等 等 ， 这 类 型 的 占 蛮 多 数 的 。</dd><br/> 
</dl> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 实现 如 图 4.9 所 示 的 定义 列表 效果 。 


-穿越 时 光 术 
3， 隐 形 透明 术 
C5. 神秘 谈心 木 
青春 不 老 术 


A: 穿 越 时 光 术 
附 


果 、 胡 思 乱 想 、 做 白 日 二 的 人 人性 各 家 
和 要: 可 是 都 只 限于 想 而 不 实际 生 


都 浪费 在 看 电视、 上 网 喧 看 一 

欢 实际 上 的 接 事 部 跟 人 保 : 
宁 原 角 在 一 边 自己 伏 自 己 的 事情 ， 但 时 

人 加 四 人 


办 外 
是 ， gg 


图 4.9 定义 列表 
4.5 菜单 列表 标记 一 一 menu 


菜单 列表 主要 用 于 设计 单列 的 菜单 列表 。 菜 单列 表 在 浏览 器 中 的 显示 效果 和 无 序列 表 是 相同 的 ， 


因此 它 的 功能 也 可 以 通过 无 序列 表 来 实现 。 
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语法 

<menu> 
<li> 列 表 项 1</li> 
<li> 列 表 项 2</li> 
<li> 列 表 项 3</li> 


</menu> 

语法 解释 

在 该 语法 中 ，<menu> 和 </menu> 标 志 着 菜单 列表 的 开始 和 结束 。 
例 4.7 实例 代码 实例 位 置 ， 光盘 \TM\sIM4\7) 


<html> 
<head> 
<title> 创 建 菜单 列表 </title> 
</head> 
<body> 
<font size="+3" color="#3300FF"> 本 章 中 介绍 的 列表 主要 包括 : </font><br/> 
<menu> 
<Ii> 无 序列 表 </li> 
<li> 有 序列 表 </li> 
<li> 定 义 列表 < 中 > 
<li> 菜 单列 表 </li> 
<li> 目 录 列 表 </li> 
</menu> 
</body> 
</html> 


运行 这 段 代 码 ， 效 果 如 图 4.10 所 示 。 


- 目录 冬 


图 4.10 菜单 列表 的 效果 


4.6 目录 列表 一 一 dir 


区 教学 录像 ， 光盘 \TIM\NIx\4\ 目 录 列 表 一 一 dir.exe 
目录 列表 用 于 显示 文件 内 容 的 目录 大 纲 ， 通 常用 于 设计 一 个 压缩 窗 列 的 列表 ， 用 于 显示 一 系列 的 
列表 内 容 ， 如 字典 中 的 索引 或 单词 表 中 的 单词 等 。 
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语法 


<dir> 
<li> 列 表 项 1</li> 
<li> 列 表 项 2</li> 
<li> 列 表 项 2</li> 


</dir> 


语法 解释 


在 目录 列表 中 ， 使 用 <dir> 作 为 目录 列表 的 声明 ， 使 用 <li> 作 为 每 一 个 项 目的 起 始 。 
例 4.8 实例 代码 〈 实 例 位 置 : 光盘 \TMNsh4\8) 


<html 

<head> 
<title> 建 立 目录 列表 </title> 
</head> 

<body> 


<font size="+2" color="#FF9900"> 文 学 世界 : </font> 


<dir> 
<Ii> 散 文 精 选 </li> 
<li> 小 说 天 地 </li> 
<li> 诗 词 歌 赋 </li> 

</dir> 

</body> 

</html> 


运行 这 段 代码 ， 效 果 如 图 4.11 所 示 。 


a 
es ET 


图 4.11 


目录 列表 


4.7 使 用 点 套 列表 


加 教学 录像 : 光盘 \TM\Ix\4\ 使 用 嵌 套 列表 .exe 


可 以 进行 嵌 套 ， 以 实现 多 级 项 目 列表 的 形式 。 
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套 列表 指 的 是 多 于 一 级 层次 的 列表 ， 一 级 项 目下 面 可 以 存在 二 级 项 目 、 三 级 项 目 等 


。 项 目 列表 
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4.7.1 ”定义 列表 的 谋 套 


定义 列表 是 一 种 两 个 层次 的 列表 ， 用 于 解释 名 词 的 定义 ， 名 词 为 第 一 层次 ， 解 释 为 第 二 层次 ， 并 
且 不 包含 项 目 符号 。 
语法 
<dl> 
<dt> 名 词 一 </dt> 
<dd> 解 释 1</dd> 
<dd> 解 释 2</dd> 
<dd> 解 释 3</dd> 
<dt> 名 词 二 </dt> 
<dd> 解 释 1</dd> 
<dd> 解 释 2</dd> 
<dd> 解 释 3</dd> 


dl> 

语法 解释 

在 定义 列表 中 ， 一 个 <dt> 标 记 下 可 以 有 多 个 <dd> 标 记 作为 名 词 的 解释 和 说 明 ， 以 实现 定义 列表 的 
例 4.9 实例 代码 〈 实 例 位 置 : 光盘 \TMNsIM\9) 


<html> 
<head> 
<title> 定 义 列表 庶 套 </title> 
</head> 
<body> 
<font color="#00FF00" size="+2"> 古 诗 介 绍 </font><br/><br/> 
<dl> 
<dt> 赠 孟浩然 </dt><br/> 
<dd> 作 者 : 李白 </dd><br/> 
<dd> 诗 体 : 五 言 律诗 </dd><br/> 
<dd> 吾 爱 孟 夫子 ， 风流 天 下 闻 。<br/> 
红颜 弃 轩 园 ， 白 首 卧 松 云 。<br/> 
醉 月 频 中 圣 ， 迷 花 不 事 君 。<br/> 
高 山 安 可 仰 ? 徒 此 把 清 芬 。<br/> 
</dd> 
<dt> 蜀 相 </dt><br/> 
<dd> 作 者 : 杜甫 </dd><br/> 
<dd> 诗 体 : 七 言 律诗 </dd><br/> 
<dd> 和 丞相 祠堂 何 处 寻 ? 锦 官 城 外 柏 森森 。<br/> 
映 阶 眉 草 自 春 色 ， 隔 叶 黄 囊 空 好 音 。<br> 
三 顾 频 烦 天 下 计 ， 两 朝 开 济 老臣 心 。<br/> 
出 师 未 捷 身 先 死 ， 长 使 英雄 泪 满 襟 。<br> 


a 
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</dd> 
</dl> 

</body> 

</html> 


运行 这 段 代码 ， 效 果 如 图 4.12 所 示 。 


EEC EEC TETOE TIT 
古诗 介绍 


赠 士 浩然 
作者 : 李白 
诗 休 : 五 言 律诗 
在 爱 2 风流 天 下 闻 。 
白 首 十 松 云 。 


有 。 
相 高 山 安 可 仰 ? 伟 此 提 清 苍 。 


作者 杜甫 
诗 体 : 七 言 律诗 


Eee 锦 官 城 外 析 森 森 
映 阶 正 草 自 春 色 。 孔 叶 黄酮 裤 好 音 。 

王磊 频 烦 天 下 计 ， 两 朝 开 济 老臣 心 。 
出 师 未 捷 身 先 死 ， 长 使 英 


图 4.12 定义 列表 的 嵌 套 


4.7.2 无 序列 表 和 有 序列 表 的 其 套 


最 常见 的 列表 嵌 套 模式 就 是 有 序列 表 和 无 序列 表 的 顽 套 ， 可 以 重复 地 使 用 <ol> 和 <ul> 标 记 组 合 实现 。 
例 4.10 实例 代码 (实例 位 置 ， 光盘 \TMIsIM4\10) 


<html> 
<head> 
<title> 有 序 与 无 序列 表 的 典 套 </title> 
</head> 
<body> 
<font color="##3333FF" size="+2"> 轻 松 一 刻 : 心理 测试 </font> 
<ul type="square"> 
<li><font size="+1" color="#FF9900"></font>Question: 当 你 赶路 累 了 ， 一 好 心 的 女巫 说 送 你 到 以 下 哪 
或 者 谁 家 里 休息 </li> 
</ul> 
<ol type="1"> 
<li> 红 磨坊 </li><br/> 
<li> 七 个 小 矮人 </li><br/> 
<Ii> 美 人 鱼 </li><br/> 
<|i> 一 休 </li><br/> 
<Ii> 饼 屋 </li><br/> 
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<Ii> 朱 丽 叶 </li><br/> 
<Ii> 附 近亲 威 家 </li><br/> 
<Ii> 不 理 她 </li><br/> 
</ol> 
<ul type="square"> 
<li><font size="+1" color="#FF9900"></font>Answer: </li> 
</ul> 
<ol type="1"> 
<Ii> 花 心 </li><br/> 
<li> 纯 情 </li><br/> 
<li> 对 爱 充满 幻想 </li><br/> 
< 放心 如 止 水 </li><br/> 
<Ii> 实 在 </li><br/> 
<Ii> 渴 望 浪漫 悲壮 的 爱情 </li><br/> 
<Ii> 顺 从 父母 之 命 媒 奴 之 言 </li><br/> 
<Ii> 暂 时 不 想 谈 恋 爱 </li><br/> 
</ol> 
</body> 
</html> 


运行 这 段 代 码 ， 效 果 如 图 4.13 所 示 。 


全 a 
心理 测试 
， 当 你 相 路 困 了 ,一 好 心 的 女 下 说 送 人 到 以 下 郭 或 者 讼 家 里 伯 电 


Eg 


国 Qucsticn， 当 你 二 特困 了 ,一 籽 心 的 妇 亚 涪 送 你 到 以 下 二 或 者 
淮 吕 里 休息 

1 亲 原 护 

2 七 个 小 类 人 

二 美人 鱼 


朱利叶 
附近 末 由 定 
不 理 好 


工 花心 

2 纯情 

i 对 脆 充 注 幻 相 
5 心 如 止 水 

5. 实在 


对 妥 刘 并] 起 

和 4 了 水 

去 实在 

短 望 恨 得 翡 导 的 爱情 6 宰 葫 浪 涡 翡 壮 的 爱情 


元 顺从 父母 之 使 帮 的 之 言 顺从 多 本 之 命 规 灼 之 言 


， 普 时 不 想 忆 六 受 i 


图 4.13 “有 序列 表 与 无 序列 表 的 大 
4.8 小 结 


本 章 主要 介绍 了 3 种 列表 ， 


壮 


F 以 实例 的 形式 对 这 3 种 列表 进行 了 详细 介绍 。 读 者 学 习 完 本 章 后 ， 
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可 以 对 HTML 的 列表 有 一 个 详细 的 了 解 。 熟 练 地 掌握 这 3 种 列表 ， 可 以 对 网 页 的 布局 有 一 定 的 帮助 。 


列表 是 一 种 非常 实用 的 数据 排列 方式 ， 它 以 条 列 式 的 模式 显示 数据 ， 使 


1. 下 列 HTML 标记 中 ， 属 于 非 成 对 标记 的 是 


A. <li> 


2. 下 列 标记 中 ， 表 示 无 序列 表 的 是 


A. <li> 与 </li> 


A. type 
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B. <ul> 


) 。 


B. <dl> 与 </dl> 
3. 有 序列 表 的 起 始 数值 是 〈 让 


B. start 


4. 下 面 是 菜单 列表 标记 的 是 


A. <dl> 


5. 能 用 于 显示 文件 内 容 的 目录 大 纲 的 标记 是 


A. <dl> 


B. <ul> 


B. <ul> 


有 


C. 


题 


) 。 


. <p> 


<ul> 与 </ul> 


. Lists 


. <menu> 


) 。 


.<dir> 


目 户 能 够 一 目 


了 然 。 


D. <font> 


D. 以 上 都 不 是 


D. 以 上 都 是 


上 都 不 是 


D. <li> 


第 


凯 


超 链 接 


( 名 教学 录像 ，22 分 钟 ) 


超 链 接 《HyperLink) 是 HTML 文件 中 可 供 连 接 至 其 他 网 络 节点 的 网 状 架 构 。 
通过 它 才 能 将 位 于 世界 各 地 的 HTML 文件 链接 起 来 ， 而 Client (使 用 者 ) 亦 能 依据 
超 链 接 标 签 中 所 指定 的 URL 连接 至 服务 器 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


| 


了 解 起 链接 的 基本 知识 
掌握 起 链接 的 建立 
掌握 内 部 链接 的 设置 方法 
掌握 书签 链接 的 设置 方法 
掌握 外 部 链接 的 设置 方法 
了 解 脚本 链接 和 空 链接 
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5.1 超 链接 的 基本 知识 
锅 4 教学 录像 : 光盘 \TM\Ix\5\ 超 链接 的 基本 知识 .exe 
5.1.1 超 链 接 
超 链接 是 网 页 页 面 中 最 重要 的 元 素 之 一 。 一 个 网 站 是 由 多 个 页 面 组 成 的 ， 页 面 之 间 依据 链接 确定 
相互 的 导航 关系 。 链 接 能 使 浏览 者 从 一 个 页 面 跳 转 到 另 一 个 页 面 ， 实 现 文档 互联 、 网 站 互联 。 


超 文本 链接 通常 简称 为 超 链 接 或 链接 。 链 接 是 指 文档 中 的 文字 或 者 图 像 与 另 一 个 文档 、 文 档 的 一 
部 分 或 者 一 幅 图 像 链接 在 一 起 ， 它 是 HTML 的 一 个 最 强大 、 最 有 价值 的 功能 。 


5.1.2 ”绝对 路 径 


绝对 路 径 就 是 主页 上 的 文件 或 目录 在 硬盘 上 的 真正 路 径 。 使 用 绝对 路 径 定位 链接 目标 文件 比较 清 
晰 ， 但 是 其 有 两 个 缺点 : 一 是 需要 输入 更 多 的 内 容 ， 二 是 如 果 该 文件 被 移动 了 ， 就 需要 重新 设置 所 有 
的 相关 链接 。 如 在 本 地 测试 网 页 时 链接 全 部 可 用 ， 但 是 到 了 网 上 就 不 可 用 了 ， 这 就 是 路 径 设置 的 问题 。 
例如 ， 设 置 路 径 为 “D:\mn\5\5-1.html”， 在 本 地 可 以 找到 该 路 径 下 的 文件 ， 但 是 到 了 网 站 上 该 文件 便 
不 一 定 在 该 路 径 下 了 ， 所 以 就 会 出 问题 。 


5.1.3 ”相对 路 径 


相对 路 径 是 最 适合 网 站 的 内 部 链接 的 。 只 要 是 属于 同一 网 站 之 下 的 ， 即 使 不 在 同一 个 目录 下 ， 相 
对 链接 也 非常 适合 。 文 件 相对 地 址 是 书写 内 部 链接 的 理想 形式 。 只 要 是 处 于 站 点 文件 夹 之 内 ， 相 对 地 
址 可 以 自由 地 在 文件 之 间 构 建 链接 。 这 种 地 址 形式 利用 的 是 构建 链接 的 两 个 文件 之 间 的 相对 关系 ， 不 
受 站 点 文件 夹 所 处 服务 器 位 置 的 影响 。 因 此 这 种 书写 形式 省 略 了 绝对 地 址 中 的 相同 部 分 。 这 样 做 的 优 
点 是 : 站 点 文件 夹 所 在 服务 器 地 址 发 生 改变 时 ， 文 件 夹 的 所 有 内 部 链接 都 不 会 出 问题 。 

相对 链接 的 使 用 方法 为 : 

加 ”如 果 链接 到 同一 目录 下 ， 则 只 需 输 入 要 链接 文档 的 名 称 ， 如 5-1.html。 

要 链接 到 下 一 级 目录 中 的 文件 , 只 需 先 输入 目录 名 , 然后 加 “/”, 再 输入 文件 名 , 如 mr5-2.html。 

加 ”如 果 链 接 到 上 一 级 目录 中 的 文件 ， 则 先 输入 “../”， 再 输入 目录 名 、 文 件 名 ， 如 ../mr/5-2.html。 

除了 绝对 路 径 和 相对 路 径 之 外 ， 还 有 一 种 称 为 根 目录 。 根 目录 常常 在 大 规模 站 点 需要 放置 在 几 个 
服务 器 上 ， 或 者 一 个 服务 器 上 同时 放置 多 个 站 点 时 使 用 。 其 书写 形式 很 简单 ， 只 需要 以 “/” 开 始 ， 表 
示 根 目录 ， 之 后 是 文件 所 在 的 目录 名 和 文件 名 ， 如 /mr/5-1.html。 
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5.2” 超 链接 的 建立 


锅 4 教学 录像 : 光盘 \TM\Ix\5\ 超 链接 的 建立 .exe 


5.2.1” 超 链接 标记 的 基本 语法 


超 链接 的 语法 根据 其 链接 对 象 的 不 同 而 有 所 变化 ， 但 都 是 基于 <a> 标 记 的 。 


语法 


<a href=" 文 件 名 "> 链接 元 素 </a> 或 <a href="URL"> 链 接 元 素 </a> 


语法 解释 


在 该 语法 中 , 链接 元 素 可 以 是 文字 , 也 可 以 是 图 片 或 其 他 页 面 元 素 。 其 中 href 是 hypertextreference 
的 缩写 。 通 过 超 链 接 的 方式 可 以 将 各 个 网 页 链接 起 来 ， 使 网 站 中 众多 的 页 面 构成 一 个 有 机 整体 ， 使 访 


问 者 能 够 在 各 个 页 


之 间 跳 转 。 超 链接 可 以 是 一 段 文 本 、 一 幅 图 像 或 其 他 网 页 元 素 ， 当 在 浏览 器 中 


鼠标 单 击 这 些 对象 时 ， 浏 览 器 可 以 根据 指示 载 入 一 个 新 的 页 面 或 者 转 到 页 面 的 其 他 位 置 。 
下 面具 体 讲解 各 种 超 链接 的 创建 方法 。 


5.2.2 ”建立 文本 超 链接 


语法 


在 网 页 中 ， 文 本 超 链接 是 最 常见 的 一 种 。 它 通过 网 页 中 的 文件 和 其 他 的 文件 进行 链接 。 


<a href=" 链 接地 址 "> 链接 文字 </a> 


语法 解释 


在 该 语法 中 ， 链 接地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 。 


例 5.1 实例 代码 〈 实 例 位 置 : 光盘 \TM\sNS\1) 


<html> 
<head> 


<title> 文 本 链接 </title> 


</head> 
<body> 


<center><h3> 中 国 古城 介绍 : 西安 古城 </h3></center> 

<a href="5-1-2.html"> 下 一 篇 : 荆州 古城 </a><br/><br/> 
&nbsp;&nbsp;&nbsp;&nbsp; 西 安 ， 古 称 “ 长 安 ”、“ 京 兆 ”。 是 举世 闻名 的 世界 四 大 古都 之 一 ， 是 中 国 历史 上 建 
都 时 间 最 长 、 建 都 朝代 最 多 、 影 响 力 最 大 的 都 城 ， 是 中 华 民族 的 摇篮 、 中 华文 明 的 发 祥 地 、 中 华文 化 的 代表 ， 有 
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着 “天 然 历史 博物 馆 ” 的 美誉 。<br /> 

&nbsp;&nbsp;&nbsp;&nbsp; 西 安 ， 在 《史记 》 中 被 誉 为 “金城 千里 ， 天 府 之 国 ”， 是 中 华 民族 的 发 祥 之 地 ， 由 周 
文王 营建 ， 建 成 于 公元 前 12 世纪 ， 先 后 有 21 个 王朝 和 政权 建 都 于 此 ， 是 13 朝 古 都 ， 中 国 历史 上 的 四 个 最 易 盛 
的 朝代 周 、 秦 、 汉 、 唐 均 建 都 西安 。 西 安 高 陵 杨 官 寨 遗址 发 现 ， 将 中 国 城市 历史 追溯 到 了 6000 年 前 的 新 石器 时 代 
晚期 ， 同 时 确定 了 西安 是 世界 历史 上 第 一 座 城市 。 

</body> 

</html> 


运行 这 段 效果 ， 如 图 5.1 所 示 。 


-下 一 
wlio) ow ms Pc x)| 


ET ETEEXETOEETT 


中 国 古 城 介 绍 : 西安 古城 


周文 3 
政 由 ， 是 13 朝 古都 ， 
秦 、 公 、 让 均 建 痢 盏 去 。 西 : 
过 少 到 了 6000 年 前 的 新 石器 
第 一 密 城 市 . 


图 5.1 文件 链接 的 页 面 效果 


在 图 5.1 中 有 一 个 文本 超 链接 “下 一 篇 :荆州 古城 ”， 它 链接 到 了 当前 目录 下 的 5-1-2.html 文件 。 
该 文件 的 实例 代码 如 下 所 示 。 


<html> 
<head> 
<title> 文 本 链接 </title> 
</head> 
<body> 

<center><h3> 中 国 古 城 介绍 : 荆州 古城 </h3></center> 

<a href="5-1-1.html"> 上 一 篇 : 西安 古城 </a><br/><br/> 
&nbsp;&nbsp;&nbspi&nbsp; 荆 州 古 城 ， 又 称 江 陵 城 ， 是 我 国 历史 文化 名 城 、 全 国 重点 文物 保护 单位 之 一 ， 是 楚 文 
化 的 发 祥 地 之 一 ， 是 著名 的 三 国 古 战场 ， 历 史上 “刘备 借 鲁 州 ”、“ 关 羽 大 意 失 荆州 ”等 脸 炙 人 口 的 三 国 故事 都 
发 生 在 这 里 。 草 州 古 城 地 处 连 东西 贯 南北 的 交通 要 塞 ， 历 来 均 为 兵家 必 争 之 地 ， 草 州 城 屡 毁 展 建 ， 现 在 的 荆州 古 
城 最 后 一 次 修建 是 在 清朝 顺治 三 年 (1646 年 ) ， 依 原址 而 建 ， 保 存 至 今 ， 是 “我 国 南方 不 可 多 得 的 完 壁 ”。<br/> 
&nbsp;&nbsp;&nbsp;&nbsp; 荆 州 古城 总 面积 4.6 平方 公里 ,分 为 三 层 ， 最 外 层 为 水 城 、 中 间 是 砖 城 ， 里面 是 土 城 ， 
水 城 〈 护 城 河 ) 全 长 10500 米 ， 宽 30 米 ， 水 深 4 米 ， 西 通 太 湖 ， 东 连 长 湖 ， 与 古 运 河 相 连 ; 城墙 四 周 原 有 东 门 
( 迎 宾 门 》、 小 东 门 《公安 门 、 水 门 》、 北 门 〈 拱 极 门 》、 小 北 门 ( 远 安 门 )》、 西 门 〈 安 澜 门 )》、 南 门 〈 南 纪 门 ) 
6 座 城 门 ， 除 小 东 门 外 ， 其 他 五 座 城 门 都 由 两 道门 组 成 ， 有 丛 城 ， 新 中 国 成 立 后 ， 又 新 开 3 座 城 门 ， 分 别 是 新 东 
门 、 新 南 门 、 新 北 门 ， 均 无 瓮城 ， 原 来 6 座 城 门 上 都 有 城 门楼 ， 分 别 是 宾 阳 楼 、 望 江 楼 、 九 阳 楼 、 曲 江 楼 、 朝 宗 
楼 、 景 龙 楼 等 ， 其 中 以 曲 江 楼 和 景 龙 楼 最 为 出 名 。<br/>&nbsp;&nbsp;&nbsp;&nbsp; 荆 州 古城 不 仅 迹 遍布 ， 
而 且 文 化 底蕴 丰厚 ， 历 史 、 神 话 传说 众多 ， 尤 其 是 《三 国 演义 》 故 事 的 广泛 流传 ， 使 得 荆州 古城 名 扬 四 海 ， 享 誉 
海内 外 ， 是 三 国旅 游 线 上 的 著名 景点 。 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 5.2 所 示 。 


中 国 古城 介绍 : 齐 州 古城 
上 一 篇 ， 西 去 古城 


草 州 古城 ， 马 称 江陵 城 ， 是 我 辐 历史 文化 名 城 、 全 加 重点 文物 保护 
单位 之 一 ， 人 二 地 之 一 ， 是 著名 的 三 国 古 战场 ， 历 史上 刘 
| 二 en 在 这 


车 a 
二 在 的 荐 州 二 姑 最 后 ”次 相 建 时 
年 《1646 年 ) ， 休 原址 而 建 ， 保 存 至 : 于 
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图 5.2 打开 的 链接 页 面 
在 这 个 页 面 中 同样 有 一 个 “上 一 篇 : 西安 古城 ”的 超 链 接 ， 单 击 该 超 链接 ， 将 转 到 图 5.1 所 示 的 页 面 。 


5.2.3 ”设置 超 链接 的 目标 窗口 


在 创建 网 页 的 过 程 中 ， 有 时 候 并 不 希望 超 链接 的 目标 窗口 将 原来 的 窗口 覆盖 ， 如 在 打开 新 的 窗口 
主页 面 的 窗口 仍 保留 在 原 处 。 这 时 可 以 通过 target 参数 设置 目标 窗口 的 属性 。 


语法 
<a href=" 链 接地 址 " target=" 目 标 窗口 的 打开 方式 "> 链接 元 素 </a> 
语法 解释 
在 该 语法 中 ，target 参数 的 取 值 有 4 种 ， 如 表 5.1 所 示 。 
表 5.1 target 参数 的 取 值 及 说 明 


target 值 目标 窗口 的 打开 方式 
arent 在 上 一 级 窗口 打开 ， 常 在 分 帧 的 框架 页 面 中 使 用 
blank 新 建 一 个 窗口 打开 
self 在 同一 窗口 打开 ， 与 默认 设置 相同 


在 浏览 器 的 整个 窗口 中 打开 ， 将 会 忽略 所 有 的 框架 结构 


在 表 5.1 中 提 到 的 框架 是 一 种 页 面 结构 。 
例 5.2 实例 代码 (实例 位 置 ， 光盘 \TMNsNS\2) 
<html> 


<head> 


<title> 目 录 窗口 的 打开 方式 </title> 


HTML 5 从 入 门 到 精通 


</head> 

<body> 
<center><h2> 和 鲁迅 作品 介绍 </h2></center> 
<hr size="4" color="#FF0000"/> 
<font size="+4">《 了 呐喊 》</font><br/><br/> 

作者 : 鲁迅 著 <br/> 

钱 理 群 王 得 后 <br/> 

出 版 社 : 浙江 文艺 出 版 社 <br/> 

出 版 日 期 ;2007 年 10 月 <br/> 

ISBN: 978 一 7 一 5339 一 0441 一 8<br/> 

字数 : 316 千 字 <br/> 

定价 : 19.50 元 <br/> 

<a href="5-2-2.html" target="_blank"> 内 容 简 介 </a> 

</body> 

</html> 


设置 这 段 代码 的 文件 名 为 5-2-1.html， 在 这 段 代码 中 包含 一 个 超 链接 文本 “内 容 简介 ”， 单 击 该 超 
链接 可 以 打开 5-2-2.html 文件 。 该 文件 中 的 代码 如 下 所 示 。 


<html> 
<head> 
<title> 目 标 窗口 的 打开 方式 </title> 
</head> 
<body> 
<center><h2> 内 容 简 介 </h2></center> 
<font size="+4">《 了 呐喊 》</font><br/><br/> 
&nbsp;&nbsp;&nbsp;&nbsp; 本 集 出 版 收 小 说 十 五 篇 ， 作 于 1918 年 至 1922 年 ，1923 年 8 月 由 北京 新 潮 出 版 
社 ， 列 为 该 社 “ 文 艺 丛书” 之 一 。1926 年 10 月 第 三 次 印刷 时 起 ， 改 由 北京 北新 书局 出 版 ， 列 入 作者 所 编 的 “ 乌 
合 之 众 ”。1930 年 1 月 第 十 三 次 印刷 时 ,作者 抽 去 其 中 的 《不 周 山 》 一 篇 (后 改名 为 《 补 天 》, 收入 《故事 新 编 》) 
此 后 印行 的 版 本 均 从 1930 年 版 。 
</body> 
</html> 


运行 文件 5-2-1.html, 单 击 窗口 中 的 “内 容 简 介 ” 超 链接 , 可 以 在 一 个 新 的 窗口 打开 文件 5-2-2.html， 
如 图 5.3 所 示 。 


本 集 出 答 愧 小 说 十 五 篇 ， 作 于 1918 年 至 1 月 
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子 ， 收 入 羽 帮 事 新 编 》 ] 此 后 印行 的 新 本 均 


图 5.3 设置 目标 窗口 的 打开 方式 
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5.3 内 部 链接 


所 谓 内 部 链接 ， 是 指 在 同一 个 网 站 内 部 ， 不 同 的 HTML 页 面 之 间 的 链接 关系 。 在 建立 网 站 内 部 链 
接 的 时 候 ， 要 考虑 到 使 链接 具有 清晰 的 导航 结构 ， 使 用 户 方便 地 找到 所 需要 内 容 的 HTML 文件 。 
例 5.3 下 面 通过 一 个 实例 说 明 在 一 个 网 站 中 内 部 链接 的 实现 方式 。 在 本 实例 中 共 包 含 3 个 文件 ， 
分 别 为 5-3.html、5-3-1.html 和 5-3-2.html。 其 中 ，5-3.html 作为 一 个 起 始 页 面 ， 另 外 两 个 文件 放置 在 与 
5-3.html 文件 同 级 的 film 文件 夹 中 。 本 实例 通过 3 个 文件 的 互相 连接 说 明 在 网 站 内 部 进行 链接 的 方法 。 
(实例 位 置 ， 光盘 \TM\sN\5W3) 
文件 5-3.html 的 代码 如 下 所 示 。 


<html> 
<head> 
<title> 内 部 链接 的 实现 </title> 
</head> 
<body> 
<center><h2> 中 国 古 城 介绍 </h2></center> 
<hr size="2" color="#FFO0000" /> 
<font size="+4"> 西 安 古城 </font><br/><br/> 
世界 历史 名 城 ， 华 夏 精 神 故 乡 ， 中 国 第 一 古都 一 一 西安 。<br/><br/> 
<a href="5-3-1.html"> 详 细 介绍 </a><br/> 
<hr size="2" color="#FF0000"/> 
<font size="+4"> 大 理 古 城 </font><br/><br/><br/> 
大 理 历 史 深 远 ， 素 有 “文献 名 邦 ” 美 名 。 大 理 古 城 位 于 风光 绮丽 的 苍山 之 顽 ， 始 建 于 明 洪 武 十 五 年 ， 是 中 国 
二 十 四 个 历史 文化 名 城 之 一 。<br/><br/> 
<a href="5-3-2.html"> 详 细 介绍 </a> 
</body> 
</html> 


在 该 文件 中 包含 了 两 个 超 链 接 ， 一 个 是 “西安 古城 ”的 详细 介绍 的 超 链接 ， 另 一 个 是 “大 理 古 城 ” 详 
细 介 绍 的 超 链接 。 这 两 个 文件 都 位 于 文件 夹 film 中 ， 在 连接 时 需要 在 链接 地 址 中 加 入 目录 和 文件 名 称 。 
“西安 古城 ”的 介绍 文件 5-3-1.html 的 代码 如 下 所 示 。 


<html> 

<head> 

<title> 内 部 链接 的 实现 </title> 

</head> 

<body> 

<center><h3> 西 安 古城 </h3></center> 

&nbsp;&nbsp;&nbsp;&nbsp; 西 安 ， 古 称 “长 安 ”、“ 京 兆 ”。 是 举世 闻名 的 世界 四 大 古都 之 一 ， 是 中 国 历 史上 建 
都 时 间 最 长 、 建 都 朝代 最 多 、 影 响 力 最 大 的 都 城 ， 是 中 华 民族 的 摇篮 、 中 华文 明 的 发 祥 地 、 中 华文 化 的 代表 ， 有 
着 “天 然 历史 博物 馆 ”的 美誉 。<br /> 

&nbsp;&nbsp;&nbsp;&nbsp; 西 安 ， 在 《史记 》 中 被 誉 为 “金城 千里 ， 天 府 之 国 ”， 是 中 华 民族 的 发 祥 之 地 ， 由 周 
文王 营建 ， 建 成 于 公元 前 12 世纪 ， 先 后 有 21 个 王朝 和 政权 建 都 于 此 ， 是 13 朝 古 都 ， 中 国 历史 上 的 四 个 最 易 盛 
的 朝代 周 、 秦 、 汉 、 唐 均 建 都 西安 。 西 安 高 陵 杨 官 寨 遗址 发 现 ， 将 中 国 城市 历史 追溯 到 了 6000 年 前 的 新 石器 时 代 
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超 链接 ， 可 以 扣 


HTML 5 从 入 门 到 精通 


晚期 ， 同 时 确定 了 西安 是 世界 历史 上 第 一 座 城市 。<br /><br /> 
<a href="5-3.htmI"> 返 回 </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="5-3-2.html"> 下 一 个 文化 古城 介绍 </a> 


</body> 
</html> 


初始 页 面 5-3.html 则 位 于 该 文件 的 上 一 级 目录 中 , 在 链接 时 需要 在 文件 名 前 添加 “../”。 而 古城 “大 


<html> 

<head> 

<title> 内 部 链接 的 实现 </title> 

</head> 

<body> 
<center><h3> 大 理 古 城 </h3></center> 


理 古城 ”的 介绍 页 与 5-3-1.html 位 于 同一 目录 中 ， 是 同 级 文件 , 在 链接 时 只 需要 将 链接 地 址 设置 为 该 广 
件 名 5-3-1.html 即 可 。 文 件 5-3-2.html 的 代码 如 下 所 示 。 


&nbsp;&nbsp;&nbsp;&nbsp; 大 理 历史 深远 ， 素 有 “文献 名 邦 ” 美 名 。 大 理 古 城 位 于 风光 绮丽 的 苍山 之 欧 ， 始 建 于 
明 洪 武 十 五 年 ， 是 中 国 二 十 四 个 历史 文化 名 城 之 一 。<br/> 

&nbsp;&nbsp;&nbsp;&nbsp; 至 今 已 有 600 多 年 的 历史 。 它 面临 洱海 ， 背 靠 苍山 ， 至 今 仍 保持 着 纵横 交错 、 棋 盘 格 
局 式 的 街道 和 梭 伟 壮 观 的 南北 城楼 ， 城 楼 上 “文献 名 邦 ” 四 个 大 字 格 外 引 人 注 目 。 最 初 东 西南 北 各 有 城 门 ， 上 有 
城楼 ， 后 毁 。 城 内 民居 石 墙 青 瓦 、 门 窗 雕 龙 画 凤 ， 显 得 古雅 质朴 。 城 西北 的 崇 圣 寺 三 塔 和 城西 南 的 弘 圣 一 塔 ， 若 
山脚 下 的 无 世祖 平 云 南 碑 和 一 年 一 度 的 三 月 街 ， 更 使 古城 显得 别有一番 情趣 。 大 理 还 是 白族 的 主要 聚居 地 。 多 彩 
的 民俗 风情 ，“ 三 坊 一 照壁 ”、“ 四 合 五 天 井 ” 的 建筑 特色 ， 都 为 人 们 探寻 南 诏 古国 打开 了 一 叶 罕 秘 之 窗 。 


<br/><br/> 


<a href="../5-3.htmI"> 返 回 </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="5-3-1.html"> 下 一 个 文化 古城 介绍 </a> 


</body> 
</html> 


运行 初始 文件 5-3.html， 会 看 到 页 面 中 包含 两 个 超 链接 文字 ， 如 图 5.4 所 示 。 


单 击 其 中 一 个 “详细 介绍 ”的 链接 可 
开 如 图 5.5 所 示 的 古城 详细 介绍 的 窗口 。 


BE EL 


以 打开 下 一 级 内 容 。 在 这 里 单 击 西安 古城 页 面 的 “详细 介绍 ” 


_x 贞 二 


中 国 古城 介绍 


古城 


世界 历史 名 城 ， 华 夏 精 神 故 多 ， 中 国 第 一 古都 一 西安 


大 理 一 一 古城 


太 理 历 中 深远 ， 素 有 文献 名 孝 “和 美 名 ,大 理 古城 位 于 风光 撞 丽 的 苍山 
之 顽 ， 始 建 于 明 洪武 十 五 年 ， 是 中 国 二 十 四 个 历史 文化 名 城 之 一 > 


详细 他 组 
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ET 
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有 各 地 
和 关中 国 基 市 历史 
狐 志 ， 问 时 议定 了 西安 是 世界 历史 上 


图 5.4 初始 窗口 的 链接 效果 


图 5.5 西安 古城 的 介绍 窗口 


第 5 章 ， 超 链接 


在 该 窗口 中 包含 了 两 个 超 链 接 ， 单 击 文本 “返回 ”可 以 返回 到 初始 页 面 5-3.html 中 ; 让 
一 个 文化 古城 介绍 ”可 以 直接 打开 另外 一 个 古城 介绍 的 窗口 ， 如 图 5.6 所 示 。 


和 文本 “下 


考 
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大 理 历史 深远 ， 素 有 -文献 名 邦 - 差 名 。 大 理 古 城 位 于 风光 绑 南 的 营 


A 的 建筑 特色 ,都 


的 民众 风情， 三 护 一 妥 台 > 
人 
返回 。 下 一 个 文化 古城 介绍 


图 5.6 大 理 古城 的 介绍 窗口 
5.4 书签 链接 


区 Nd 教学 录像 : 光盘 \TIM\Ix\5\ 书 签 链接 .exe 

在 浏览 页 面 的 时 候 ， 如 果 页 面 的 内 容 较 多 ， 页 面 过 长 ， 就 需要 不 断 地 拖 动 滚动 条 ， 很 不 方便 ， 如 
果 要 寻找 特定 的 内 容 ， 就 更 加 不 方便 。 这 时 如 果 能 在 该 网 页 或 另外 一 个 页 面 上 建立 目录 ， 浏 览 者 只 要 
单 击 目 录 上 的 项 目 就 能 自动 跳 到 网 页 相应 的 位 置 进行 阅读 ， 这 样 无 疑 是 最 方便 的 。 还 可 以 在 页 面 中 设 
定 诸如 “返回 页 首 ”之 类 的 链接 ， 即 书签 链接 。 

建立 书签 链接 的 步骤 分 为 两 步 : 一 是 建立 书签 ， 二 是 为 书签 制作 链接 。 


5.4.1 建立 书签 


书签 可 以 与 链接 文字 在 同一 页 面 ， 也 可 以 在 不 同 的 页 面 。 但 是 实现 网 页 内 部 的 书签 链接 ， 都 需要 
先 建立 书签 。 通 过 建立 书签 才能 对 页 面 的 内 容 进 行 引 导 和 跳 转 。 

语法 

<a name=" 书 签名 称 "> 文字 </a> 

语法 解释 

在 该 语法 中 ， 书 签名 称 就 是 对 于 后 面 要 跳 转 所 创建 的 书签 ， 而 文字 则 是 设置 链接 后 跳 转 的 位 置 。 

例 5.4 实例 代码 〈 实 例 位 置 : 光盘 \TMNsI\SV4) 


<html> 
<head> 
<title> 定 义 书签 </title> 


HTML 5 从 入 门 到 精通 


</head> 

<body> 

<h3> 性 格 测试 : 公园 里 看 书 测试 你 性 格 。</h3> 

<hr size="3" color="#FF0000" /> 

<a name="answerA"> 选 择 A: 雷阵雨 </a><br/> 

&nbsp;&nbsp;&nbsp;&nbsp; 雷 阵雨 ， 是 会 淋 湿 书 本 、 头 发 ， 令 人 感觉 不 太 舒服 的 事物 。 故 选 此 答案 的 人 ， 是 想 回 
避 此 种 情况 ， 是 属于 自我 防卫 本 能 比较 强 的 人 。 你 的 不 安 比 别人 强 一 倍 ， 对 可 能 威胁 到 自我 的 危机 相当 敏感 。 
此 ， 一 旦 察觉 自己 身 处 危机 时 ， 通 常会 力争 上 游 、 发 挥 潜力 。 倘 若 陷 入 低潮 的 话 ， 也 能 化 危机 为 转机 ， 及 早 摆脱 
困境 。<br/><br/> 

<hr size="3" color="#FF0000" /> 

<a name="answerB"> 选 择 B: 午睡 </a><br/> 

&nbsp;&nbsp;&nbsp;&nbsp; 午 睡 ， 显 示 乐 观 的 潜在 心理 。 此 种 人 的 循环 性 气质 很 强 ， 容 易 受 当场 的 气氛 感染 。 一 旦 感 
觉 情绪 低落 时 ， 可 以 借 着 运动 、 休 闲 来 变换 心情 ， 或 是 改变 工作 、 生 活 环境 ， 让 自己 轻松 一 下 。 如 此 一 来 ， 便 能 摆脱 困 
境 ， 重 新 出 发 。 万 一 遇 到 极度 低潮 的 状况 ， 换 个 新 工作 或 是 改变 根本 的 环境 ， 都 是 不 错 的 主意 。<br/><br/> 

<hr size="3" color="#FFO0000"/> 

<a name="answerC"> 选 择 C: 改 念 别 科 </a><br/> 

&nbsp;&nbsp;&nbsp;&nbsp; 改 念 别 科 ， 表 示 可 能 性 或 上 进 心 。 此 种 人 原本 提升 自我 的 欲望 就 很 强 。 因 此 ， 当 陷入 
低潮 时 ， 可 以 去 找 德高望重 的 人 开导 ， 不 然 就 是 阅读 名 人 传记 ， 接 受精 神 上 的 刺激 。 因 为 这 样 可 以 激发 上 进 心 ， 

不 会 被 一 点 小 小 的 挫折 击 垮 。<br/><br/> 

</body> 

</html> 


在 这 段 代码 中 ， 定 义 了 3 个 书签 ， 分 别 命名 为 answerA、answerB 和 answerC。 运 行 这 段 代 码 ， 效 
果 如 图 5.7 所 示 。 


8 Fwpse wv D - ox | Bsus 


| 文件 护 太 E) 王 看 VM] 避 友 A) 工具 (天 中 (H) 


性 格 测试 : 公园 里 看 书 测试 你 性 格 。 


人 头发， 人 故 先 


便 采 接 以 园 浇 。 重 新 出 发 。7 
或 是 改变 根 本 的 环 和 EH 


选择 C: 改 念 别 科 

人 ee 性 或 上 进 心 。 扳 种 人 居 李 掉 六 自 各 的 多 员 
启 入 低潮 时 ， 可 以 去 找 德高望重 的 人 开导 ， 不 ; 这 机 

和 接受 精神 上 的 刺激 。 本 

不 会 被 一 点 小 小 的 挫折 击 境 - 


5.7 定义 书签 


可 以 看 到 ， 在 浏览 器 中 并 不 能 看 到 定义 的 书签 ， 但 是 它 实际 上 已 经 存在 了 。 此 时 就 可 以 定义 书签 
链接 了 。 
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5.4.2 ”链接 到 同一 页 面 的 书签 


下 面 就 可 以 为 刚才 制作 的 书签 添加 链接 内 容 了 。 在 代码 的 前 面 增加 链接 文字 和 链接 地 址 就 能 够 实 
现 同 页 面 的 书签 链接 。 


语法 
<a href=# 书 签 的 名 称 "> 链 接 的 文字 </a> 
语法 解释 


在 该 语法 中 ， 书 签 的 名 称 就 是 刚才 所 定义 的 书签 名 ， 也 就 是 name 的 赋值 。 而 # 则 代表 这 是 书签 的 
链接 地 址 。 
例 5.5 实例 代码 (实例 位 置 ， 光盘 \TMNsN5\5) 


<html> 

<head> 

<title> 定 义 书签 </title> 

</head> 

<body> 

<h3> 性 格 测试 : 公园 里 看 书 测试 你 性 格 。</h3> 

夏天 ， 一 位 年 轻 人 坐 在 公园 的 椅子 上 看 书 ， 看 样子 像 是 考生 ， 只 见 他 在 看 一 本 像 是 英文 的 参考 书 。 突 然 ， 他 合 上 
书本 一 一 你 认为 他 为 什么 合 上 书本 呢 ? 请 从 以 下 几 个 备 选 答案 中 选 一 个 与 你 想象 中 较 接近 的 : <br /><br /> 

<a href="#answerA">A: 雷 阵雨 </a><br/><br/> 

<a href="#answerB">B: 午 睡 </a><br/><br/> 

<a href="#answerC">C: 改 念 别 科 </a><br/><br/> 

<hr size="3"/> 

<a name="answerA"> 选 择 A: 雷阵雨 </a><br/> 

&nbsp;&nbsp;&nbsp;&nbsp; 雷 阵雨 ， 是 会 淋 湿 书 本 、 头 发 ， 令 人 感觉 不 太 舒 服 的 事物 。 故 选 此 答案 的 人 ， 是 想 回 
避 此 种 情况 ， 是 属于 自我 防卫 本 能 比较 强 的 人 。 你 的 不 安 比 别人 强 一 倍 ， 对 可 能 威胁 到 自我 的 危机 相当 敏感 。 因 
此 ， 一 旦 察觉 自己 身 处 危机 时 ， 通 常会 力争 上 游 、 发 挥 潜力 。 倘 若 陷 入 低潮 的 话 ， 也 能 化 危机 为 转机 ， 及 早 摆脱 
困境 。<br/><br/> 

<hr size="3" color="#FF0000" /> 

<a name="answerB"> 选 择 B: 午睡 </a><br/> 

&nbsp;&nbsp;&nbsp;&nbsp; 午 睡 ， 显 示 乐 观 的 潜在 心理 。 此 种 人 的 循环 性 气质 很 强 ， 容 易 受 当场 的 气氛 感染 。 一 
旦 感觉 情绪 低落 时 ， 可 以 借 着 运动 、 休 闲 来 变换 心情 ， 或 是 改变 工作 、 生 活 环境 ， 让 自己 轻松 一 下 。 如 此 一 来 ， 
便 能 摆脱 困境 ， 重 新 出 发 。 万 一 遇 到 极度 低潮 的 状况 ， 换 个 新 工作 或 是 改变 根本 的 环境 ， 都 是 不 错 的 主意 。 
<br/><br/> 

<hr size="3" color="#FF0000" /> 

<a name="answerC"> 选 择 C: 改 念 别 科 </a><br/> 

&nbsp;&nbsp;&nbsp;&nbsp; 改 念 别 科 ， 表 示 可 能 性 或 上 进 心 。 此 种 人 原本 提升 自我 的 欲望 就 很 强 。 因 此 ， 当 陷入 
低潮 时 ， 可 以 去 找 德高望重 的 人 开导 ， 不 然 就 是 阅读 名 人 传记 ， 接 受精 神 上 的 刺激 。 因 为 这 样 可 以 激发 上 进 心 ， 
不 会 被 一 点 小 小 的 挫折 击 垮 。<br/><br/> 

</body> 

</html> 


运行 这 段 代 码 ， 可 以 看 到 3 个 文字 链接 ， 如 图 5.8 所 示 。 
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属 洒 wewrneesewp cx|saxas 


EEC ET ET] 


性 格 测试 :公园 里 看 书 测试 你 性 格 - 


Ns 一 个 芭 人 仆 全 全 的 的 于 二 韦 。 td EN 
像 是 英文 的 : 突然 ， 他 合 上 书 : 


Mr 5 二 


图 5.8 ”建立 书签 和 链接 的 页 面 效 果 


在 页 面 中 单 击 其 中 的 一 个 链接 文字 ， 页 面 将 会 跳 转 到 该 链接 的 书签 所 在 位 置 。 单 击 “A: 雷 阵雨 ”， 


跳 转 后 的 页 


效果 如 图 5.9 所 示 ; 单 击 页 面 中 的 “C: 改 念 别 科 ”链接 ， 页 面 跳 转 到 书签 answerC 所 在 的 


位 置 ， 如 图 


5.10 所 示 。 


【< ES reresens 2 ~ CX FE 


IRM WH) 


忻 骨 六 名 收 于 夫 (A) 
Ll Rd Me 
不 太 好 时 的 事物, 故 选 
六 王 主 夏 贡 要 本 的 于 境 ， 孝 是 处 负 交 


人 发 探 潜力 , 倘若 | 
搜 脱 国境。 


:可 能 性 或 上 进 心 。 二 和 的 大 自贡 的 区 人 和 
的 洪 此 种 人 的 短 环 性 气质 a | Le 
7 
人 人 人 不 会 被 -点 小 小 的 挫折 击 的 
改 交工 作 、 生活 环境 ， 让 自己 经 松 一 下 ,加 此 一 率 ， 
。 重新 出 以 ， 万 一 版 度 的 交 况 ， 撞 个 订 开 人 。 


图 5.9 跳 转 的 效果 图 5.10 ” 跳 转 到 书签 所 在 位 置 


5.4.3 ”链接 到 不 同 页 面 的 书签 


书签 链接 不 但 可 以 链接 到 同一 页 面 ， 也 可 以 在 不 同 页 面 中 设置 。 


语法 


<a href=" 链 接 的 文件 地 址 # 书 签 的 名 称 "> 链接 的 文字 </a> 
语法 解释 


在 该 语法 中 ， 与 同一 页 面 的 书签 链接 不 同 的 是 ， 需 要 在 链接 的 地 址 前 增加 文件 所 在 的 位 置 。 
下 面 设 置 一 个 单独 的 链接 页 面 ， 使 其 链接 到 前 面 定义 的 书签 页 面 。 


例 5.6 


<html> 
<head> 


实例 代码 (实例 位 置 ， 光盘 \TMN\sN\5\6) 


<title> 定 义 书签 </title> 
</head> 


<body> 
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<h3> 性 格 测试 : 公园 里 看 书 测试 你 性 格 。</h3> 

夏天 ， 一 位 年 轻 人 坐 在 公园 的 椅子 上 看 书 ， 看 样子 像 是 考生 ， 只 见 他 在 看 一 本 像 是 英文 的 参考 书 。 突 然 ， 他 合 上 
书本 一 一 你 认为 他 为 什么 合 上 书本 呢 ?请 从 以 下 几 个 备 选 答案 中 选 一 个 与 你 想象 中 较 接近 的 : <br/><br/> 

<a href="5-6-1.html#answerA"> 选 择 A: 雷阵雨 </a><br/><br/> 

<a href="5-6-1.html#answerB"> 选 择 B: 午睡 </a><br/><br/> 

<a href="5-6-1.html#answerC"> 选 择 C: 改 念 别 科 </a><br/><br/> 

</body> 

</html> 


运行 这 段 代 码 ， 效 果 如 图 5.11 所 示 。 
单 击 其 中 的 某 个 链接 ， 如 “选择 C: 改 念 别 科 ”， 就 可 以 直接 链接 到 书签 所 在 的 位 置 即 5-6-1.html， 


如 图 5.12 所 示 。 


€ EET 
Zn Sa BW RN TR 
性 格 测试 ， 公 园 里 看 书 测试 你 性 格 。 

合 上 : 


XH RE EM 家 囊 夫 (A) 工具 (帮助 (H) 

换 心情 ， 或 是 改 交 工作 、 生 活 环境 ， 让 自己 轻松 一 9 
便 误 授 涪 困境 ， 重 新 出 发 ， tT 处 三 
或 是 改变 根本 的 环境 ， 都 是 不 


信人 人 全 电站 天 本 志和 再 于 直人 考生 只 见 上 
i 语 上 书 ; ey 


可 能 性 或 上 进 心 。 此 种 人 原本 提升 自 过 
入 低潮 时 ， 可 以 去 找 德高望重 的 人 开导 ， 不 然 就 
所 放生 人 和 


。 恒 5 运行 效果 图 512 链接 的 效果 
5.5 外 部 链接 


所 谓 外 部 链接 ， 是 指 跳 转 到 当前 网 站 外 部 ， 与 其 他 网 站 中 页 面 或 其 他 元 素 之 间 的 链接 关系 。 这 种 
链接 在 一 般 情况 下 需要 书写 绝对 的 链接 地 址 。 

制作 外 部 链接 的 时 候 ， 使 用 URL 来 定位 WWW 信息 ， 这 种 方式 可 以 简洁 、 明 了 、 准 确 地 描述 信 
息 所 在 的 地 点 。 

最 常见 的 URL 格式 是 “http://”， 其 他 的 格式 如 表 5.2 所 示 。 


表 5.2 绝对 地 址 的 设置 格式 及 含义 


格式 含 义 
http:// 采用 WWW 服务 进入 万 维 网 站 点 
ftp:// 通过 FTP 访问 文件 传输 服务 器 
telnet:// 启动 Telnet 
mailto:// 直接 启动 邮件 系统 E-mail 


HTML 5 从 入 门 到 精通 


5.5.1 通过 HTTP 协议 


网 页 中 最 常 使 用 HTTP 协议 进行 外 部 链接 的 是 设置 友情 链接 。 
语法 

<a href="http://… "> 链接 文字 </a> 

语法 解释 


在 该 语法 中 ，http:// 表 明 这 是 关于 HTTP 协议 的 外 部 链接 ， 在 其 后 则 输入 网 站 的 网 址 即 可 。 
例 5.7 实例 代码 (实例 位 置 ， 光盘 \TMNsN5\7) 


<html> 

<head> 

<title> 链 接 到 外 部 网 站 </title> 

</head> 

<body> 

<a href="http://www.mingribook.com"> 点 击 进入 明日 图 书 网 </a> 
</body> 

</html> 


运行 这 段 代码 ， 可 以 实现 如 图 5.13 所 示 的 页 面 效 果 。 
单 击 “ 点 击 进入 明日 图 书 网 ” 超 链接 后 ， 将 打开 明日 图 书 网 的 首页 ， 如 图 5.14 所 示 。 


明日 图 书 网 简介 


lal hs 我 们 为 不 同 的 编程 人 员 

的 图 书 ee 全 程 实 录 、 苑 
人 人 六 技术 大 全 、 世代 区 
等 ， 而 且 我 们 为 读者 提供 免费 的 技术 支持 


图 5.13 设置 外 部 链接 的 页 面 图 5.14 明日 图 书 网 首页 
5.5.2 通过 FTP 


Internet 上 资源 丰富 ， 通 过 FTP (文件 传 输 协议 ) 可 以 足 不 出 户 地 获得 各 种 免费 软件 和 其 他 文件 。 
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该 协议 是 使 计算 机 与 计算 机 之 间 能 够 相互 通信 的 语言 ， 可 使 文件 和 文件 夹 能 够 在 Internet 上 公开 传输 。 
在 某 些 情况 下 ， 户 需要 从 网 络 计算 机 管理 员 处 获得 许可 才能 登录 并 访问 计算 机 上 的 文件 。 但 是 通常 
户 会 发 现 可 以 使 用 FTP 访问 某 个 网 络 或 服务 器 ， 而 不 需要 拥有 该 计算 机 的 账户 ， 也 不 必 是 授权 的 密 


码 持 有 人 。 这 些 匿名 FTP 服务 器 可 包含 能 够 通过 FTP 公开 获得 的 广泛 数据 。 
语法 
<a href="ftp://..…."> 文 字 链 接 <a> 
语法 解释 


实例 代码 

<html> 

<head> 

<title> 使 用 FTP 服务 </title> 
</head> 

<body> 

链接 FTP 服务 器 的 链接 

<hr size="2"> 

<a href="ftp://221.8.65.74" target:”blank"> 编 程 词典 个 人 版 更 新 地 址 </a> 
</body> 

</html> 


运行 这 段 代码 ， 可 以 实现 如 图 5.15 所 示 的 页 面 效 果 。 


在 页 面 中 包含 一 个 文本 链接 ， 它 所 链接 的 地 址 就 是 一 个 FTP 网 址 。 而 设置 的 target 参数 则 决定 了 


在 打开 的 新 页 面 中 进行 链接 。 打 开 的 效果 如 图 5.16 所 示 。 


ET TA [= 


编程 词典 个 人 版 更 新 地 址 


Ema Ta EE TR LEE TD FT FE 黄田 珊 四 | Ea 
ETTTTTTUSSTTOISE 链接 FTP 服 务 器 外 @ 入 tp /yzeL .65 rwy ES Ee 
链接 FTP 服 务 器 的 链接 仿 程 词典 个 人 版 ia | 


在 该 语法 中 ，ftp:// 表 明 这 是 关于 FTP 协议 的 外 部 链接 ， 在 其 后 则 输入 网 站 的 网 址 即 可 。 


到 [rr 
ERI 国 EE 用户 ; 匿名 | Intornet a 
图 5.15 设置 FTP 链接 的 页 面 图 5.16 打开 的 FTP 地 址 
5.5.3 ”发送 E-mail 


很 多 拥有 个 人 网 页 的 朋友 都 喜欢 在 网 站 的 醒目 位 置 写 上 自己 的 电子 邮件 地 址 ， 这 样 网 页 浏览 者 一 
且 用 鼠标 单 击 一 下 由 mailto 组 成 的 超 链接 ， 就 能 自动 打开 当前 计算 机 系统 中 默认 的 电子 邮件 客户 端 软 


件 ， 如 Outlook Express、Foxmail 等 。 其 实 这 是 通过 mailto 标签 来 实现 的 。 
语法 
<a href="mailto: 电 子 邮 件 地 址 "> 链接 文字 </a> 
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语法 解释 
在 该 语法 的 电子 邮件 地 址 后 还 可 以 增加 一 些 参数 ， 如 表 5.3 所 示 。 
表 5.3 mailto 标签 的 参数 


语 
<a hre 全 "mailto: 电 子 邮 件 地 址 ?CC= 电 子 邮件 地 址 "> 链接 文字 </a> 
<a hre 全 "mailto: 电 子 邮 件 地 址 ?Subject = 主题 文字 "> 链接 文字 </a> 


含义 
抄 送 收 件 人 
电子 邮件 主题 


BCC 暗 送 收 件 人 <a href="mailto: 电 子 邮 件 地 址 ?BCC = 电子 邮件 地 址 "> 链接 文字 </a> 
电子 邮件 内 容 <a href="mailto: 电 子 邮 件 地 址 ?Body = 邮件 内 容 "> 链接 文字 </a> 
这 些 参数 可 以 没有 ， 也 可 以 同时 设置 几 个 。 在 带 有 多 个 参数 时 ， 需 要 使 用 有 符号 进行 分 隔 。 

实例 代码 

<html> 

<head> 

<title> 链 接 mail 服务 器 </title> 

</head> 

<bod 


y> 
链接 mail 服务 器 的 链接 
<hr size="2"> 
<a href="mailto:mingrisoft@mingrisoft.com"> 明 日 编程 词典 注册 信息 发 送 </a> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 5.17 所 示 。 单 击 “ 明 日 编程 词典 注册 信息 发 送 ” 链 接 ， 打 开 系统 默认 的 
电子 邮件 软件 一 一 Outlook Express 发 送 邮 件 ， 如 图 5.18 所 示 。 


) 查看 WD 扳 入 C) 相 式 工具 QD) 邮件 天 只 ”| 詹 


I | 


om 
me 


ETEEETEERDTTSTTTOCTTIO 3: [ED 
Er pr RA 可 
rr el 国生 | 《D# 纺 程 词典 》 内 容 包 括 入 门 训 红 营 、 超 级 编程 学 举 、 开 发 

资源 库 和 数字 插件 四 大 功能 版 块 ，200 多 小 时 的 视频 录像 ，35 个 
性 近 coal 名 的 从 欣 ] 行业 项 目 开发 ，3800 多 个 示例 及 项 目 源码 ，8 个 多 (的 开发 内 容 
明日 编程 词典 注册 信息 发 送 J 《技术 、 实 例 、 模 块 ， 界 面 、 方 案 等 海量 资源 ) ，7 类 共 71 个 可 可 
[3] 广 [[ [后 和 0 | I 前 

图 5.17 电子 邮件 链接 图 5.18 发 送 电 子 邮件 


5.5.4 下 载 文件 


如 果 希 望 制作 下 载 文件 的 链接 ， 只 需 在 链接 地 址 处 输入 文件 所 在 的 位 置 即 可 。 当 单 击 链接 后 ， 浏 
览 器 会 自动 判断 文件 的 类 型 ， 然 后 根据 不 同情 况 做 出 相应 处 理 。 
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语法 
<a href=" 文 件 所 在 地 址 "> 链接 文字 </a> 
语法 解释 


在 文件 所 在 地 址 中 设置 文件 的 路 径 ， 可 以 是 相对 地 址 ， 也 可 以 是 绝对 地 址 。 
例 5.8 实例 代码 (实例 位 置 ， 光盘 \TMNsNS\8) 


<html> 

<head> 

<title> 文 件 下 载 </title> 

</head> 

<body> 

<h4> 最 新 浏览 器 下 载 </h4><br/><br/> 

<a href="Opera_11.52.1000_XiaZaiBa.exe"> 最 新 的 Opera 浏览 器 下 载 </a> 
</body> 

</html> 


运行 这 段 代码 ， 效 果 如 图 5.19 所 示 。 
单 击 页 面 中 的 “最 新 的 Opera 浏览 器 下 载 ” 链 接 ， 可 以 打开 如 图 5.20 所 示 的 提示 对 话 框 。 


eer) 


[eS rrr Er 加 


Opera 11s21000 Xiazsigaexe (LLOME) LH-pe * 
二 ”这样 芝 开 的 文 件 可 能 厅 息 的 计算 册 有 高. 


运行 R) RS) 7 MMO 


图 5.19 设置 文件 下 载 页 面 图 5.20 文件 下 载 的 提示 对 话 框 


在 该 对 话 框 中 单 击 “ 保 存 ” 按 钮 ， 将 弹出 如 图 5.21 所 示 的 “另存 为 ”对 话 框 。 在 该 对 话 框 中 设置 
相应 的 存储 位 置 ， 单 击 “保存 ”按钮 即 可 实现 文件 的 保存 。 


四 


1 


NHRIN Opera 11 521000 637i83 
Ream EE 
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图 5.21 “另存 为 ”对 话 框 


5.6. 


明 脚 


HTML 5 从 入 门 到 精通 


5.6 其 他 链接 


除了 常见 的 内 部 链接 、 外 部 链接 、 书 签 链接 等 ， 在 页 面 中 还 可 以 使 用 脚本 链接 和 空 链 接 。 
1 脚本 链接 


在 链接 语句 中 ， 可 以 通过 脚本 来 实现 HTML 语言 完成 不 了 的 功能 。 下 面 以 JavaScript 脚本 为 例 说 
本 链接 的 使 用 。 


语法 

<a href="javascript:.… "> 文字 链接 <a> 

语法 解释 

在 javascript: 后 面 编写 的 就 是 具体 的 脚本 。 
实例 代码 


<html > 

<head> 

<title> 脚 本 链接 </title> 

</head> 

<body> 

<a href="javascript:window.close()"> 关 闭 窗 口 </a> 
</body> 

</html> 


运行 这 段 代 码 ， 效 果 如 图 5.22 所 示 。 
当 单 击 “ 关 闭 窗口 ”链接 后 ， 可 以 弹出 如 图 5.23 所 示 的 对 话 框 ， 单 击 “ 是 ”按钮 后 浏览 器 窗口 将 


关闭 。 
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TT 二 
[全 osslahtml P - CX | tes 


下 “ Wndove ntemet Ecplorer 
~ Gm 
& 您 查看 的 网 万 下 在 法 本 关 亲 窗口. 
县 大 关闭 比 窜 口 ? 
图 5.22 脚本 链接 图 5.23 是 否 关闭 窗口 
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5.6.2 ” 空 链接 


所 谓 空 链接 是 指 在 指向 链接 后 ， 鼠 标 会 变 成 手 形 ， 但 单 击 链接 后 ， 仍 然 停留 在 当前 页 面 。 在 代码 


中 可 以 通过 # 符 号 来 实现 空 链接 。 
语法 

<a href="#'> 文 字 链 接 </a> 
语法 解释 

# 符 号 可 以 实现 空 链 接 。 
实例 代码 

<html> 

<head> 
<title> 空 链接 </title> 
</head> 

<body> 

<a href="#"> 空 链接 </a> 


</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 5.24 所 示 。 单 击 链 接 后 ， 仍 然 停 留 在 当前 页 面 。 


[ET 一 一 


Oe 一 


图 5.24 ” 空 链接 


5.7 小 结 


链接 是 一 个 网 站 的 灵魂 。 在 HTML 语言 中 创建 链接 非常 方便 , 而 且 超 链 接 对 于 一 个 网 站 至 关 重要 。 


理解 一 些 关 于 链接 的 基本 概念 和 原理 ， 不 仅 有 助 于 HTML 链接 标记 的 使 用 ， 而 且 对 于 其 他 网 页 制 
件 的 使 用 ， 以 及 对 于 高 层次 的 网 页 编程 等 都 有 很 大 的 帮助 。 本 章 从 超 链接 的 理论 讲 起 ， 主 要 介绍 


种 地 址 形式 : 绝对 地 址 、 文 件 相 对 地 址 和 根 目录 相对 地 址 。 然 后 介绍 如 何 创建 各 种 不 同形 式 的 链 
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5.8 习 题 
选择 题 
1. 创建 一 个 位 于 文档 内 部 位 置 的 链接 的 代码 是 Ys 
A. <ahref="#NAME"></a> B. <aname="NAME"></a> 
C. <ahref="mailtoEMAIL"></a> D. <ahref="URL"></a> 
2. HTML 代码 <a name="NAME">...</a> 表示 ( bp 
A， 创建 一 个 超 链接 B. 创建 一 个 自动 发 送 电子 邮件 的 链接 
C. 创建 一 个 位 于 文档 内 部 的 连接 点 D. 创建 一 个 指向 位 于 文档 内 部 的 连接 点 


3. 下 面 关于 绝对 地 址 与 相对 地 址 的 说 法 错误 的 是 (  )。 
A. 在 HTML 文档 中 插入 图 像 其 实 只 是 写 入 一 个 图 像 链接 的 地 址 ， 而 不 是 真 的 把 图 像 插入 到 文档 中 
B. 使 用 相对 地 址 时 ， 图 像 的 链接 起 点 是 此 HTML 文档 所 在 的 文件 夹 
C. 使 用 相对 地 址 时 ， 图 像 的 位 置 是 相对 于 Web 的 根 目录 
D. 如 果 要 经 常 进行 改动 ， 推 荐 使 用 绝对 地 址 
4. 下 列 关 于 绝对 路 径 的 说 法 正确 的 一 项 是 (  )。 
A. 绝对 路 径 是 被 链接 文档 的 完整 URL， 不 包含 使 用 的 传输 协议 
B. 使 用 绝对 路 径 需 要 考虑 源 文件 的 位 置 
C. 在 绝对 路 径 中 ， 如 果 目 标 文件 被 移动 ， 则 链接 同时 可 用 
D. 创建 外 部 链接 时 ， 必 须 使 用 绝对 路 径 
5. 在 “属性 ”面板 的 “目标 ” 框 中 的 _blank 表示 〈  )。 
. 将 链接 文件 在 上 一 级 框架 页 或 包含 该 链接 的 窗口 中 打开 
.将 链接 文件 在 新 的 窗口 中 打开 
.将 链接 文件 载 入 相同 的 框架 或 窗口 中 
.将 链接 文件 载 入 到 整个 浏览 器 属性 窗口 中 ， 将 删除 所 有 框架 
6. 下 列 关于 在 一 个 文档 中 可 以 创建 的 链接 类 型 ， 说 法 不 正确 的 是 (  ) 。 
A. 链接 到 其 他 文档 或 文件 〈 如 图 形 、 影 片 、PDF 或 声音 文件 ) 的 链接 
B. 命名 锚 记 链接 ， 此 类 链接 可 跳 转 至 文档 内 的 特定 位 置 
C. 电子 邮件 链接 ， 此 类 链接 可 新 建 一 个 收 件 人 地 址 已 经 填 好 的 空白 电子 邮件 
D. 空 链接 和 脚本 链接 ， 此 类 链接 能 够 在 对 象 上 附加 行为 ， 但 不 能 创建 执行 JavaScript 代码 的 链接 
7. 下 面 哪 一 项 的 电子 邮件 链接 是 正确 的 ? (  ) 


A. xxx.com.cn B. xxx@.net C. xxx@com D. xxx@xxx.com 
判断 题 


8. 建立 锚 记 链接 时 必须 在 锚 点 前 加 “#”。 (  ) 
9. FTP 协议 是 指 超 文 本 传输 协议 。( ) 


DNOm> 


凯 


第 


使 用 图 像 


( 铝 教学 录像 : 35 分 钟 ) 


万 维 网 与 其 他 类 型 的 网 络 (如 FTP) 最 大 的 不 同 就 在 于 它 在 网 页 上 可 呈现 丰富 
的 色彩 及 图 像 。 用 户 可 以 在 网 页 中 放 入 自己 的 照片 ， 可 以 放 入 公司 的 商标 ， 还 可 以 
把 图 像 作为 一 个 按钮 来 链接 到 另 一 个 网 页 ， 这 就 让 网 页 变 得 丰富 多 彩 了 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 

让 了 解 图 像 的 基本 格式 

MH ”掌握 添加 图 像 的 方法 

MH ”掌握 图 像 属性 的 设置 

H 掌握 图 像 的 起 链接 


HTML 5 从 入 门 到 精通 


6.1 图 像 的 基本 格式 


攻 教学 录像 : 光盘 \TM\Ix\G\ 图 像 的 基本 格式 .exe 
今天 能 看 到 如 此 丰富 多 彩 的 网 页 ， 都 是 因为 图 像 的 作用 。 当 前 万 维 网 上 流行 的 图 像 格式 以 


GIF 和 


JPEG 为 主 ， 另 外 还 有 一 种 名 为 PNG 的 文件 格式 ， 也 被 越 来 越 多 地 应 用 在 网 络 中 。 以 下 分 别 对 这 3 种 


图 像 格式 的 特点 进行 介绍 。 
GIF 格式 


日 ， 但 GIF 只 能 处 理 256 色 。 
GIF 格式 适合 于 商标 、 新 闻 式 的 标题 或 其 他 小 于 256 色 的 图 像 。 


GIF 格式 采用 LZW 压缩 ， 是 以 压缩 相同 颜色 的 色 块 来 减少 图 像 大 小 的 。 由 于 LZW 压缩 不 会 造成 
任何 品质 上 的 损失 ， 而 且 压 缩 效率 高 ， 再 加 上 GIF 在 各 种 平台 上 都 可 使 用 ， 所 以 很 适合 在 互联 网 上 使 


LZW 压缩 是 一 种 能 将 数据 中 重复 的 字符 串 加 以 编码 制作 成 数据 流 的 一 种 压缩 法 ， 通 常 应 


于 GIF 


图 像 文 件 的 格式 。 
JPEG 格式 


对 于 照片 之 类 全 彩 的 图 像 ， 通 常 都 以 JPEG 格式 来 进行 压缩 ， 也 可 以 说 ，JPEG 格式 通常 用 


超过 256 色 的 图 像 格 式 。JPEG 的 压缩 过 程 会 造成 一 些 图 像 数据 的 损失 ， 所 造成 的 “损失 ”是 网 


来 保存 
除了 一 


些 视 觉 上 不 容易 觉察 的 部 分 。 如 果 剔 除 适当 ， 视 觉 上 不 但 能 够 接受 ， 而 且 图 像 的 压缩 效率 也 会 提高 ， 


使 图 像 文 件 变 小 ， 反之， 剔除 太 多 图 像 数 据 ， 则 会 造成 图 像 过 度 失真 。 
PNG 格式 


PNG 格式 是 一 种 非 破坏 性 的 网 页 图 像 文件 格式 ， 它 提供 了 将 图 像 文件 以 最 小 的 方式 压缩 才 


又 不 造 


成 图 像 失真 的 技术 。 它 不 仅 具备 了 GIF 图 像 格 式 的 大 部 分 优点 ， 而 且 还 支持 48-bit 的 色彩 ， 更 快 的 交 


错 显示 ， 跨 平台 的 图 像 亮度 控制 ， 更 多 层 的 透明 度 设置 。 
6.2 ”添加 图 像 一 一 img 


Ba 教学 录像 :光盘 \TM\IxX\6\ 添 加 图 像 一 —img.exe 
有 了 图 像 文件 之 后 ， 就 可 以 使 用 img 标记 将 图 像 插 入 到 网 页 中 ， 从 而 达到 美化 页 面 的 效果 


语法 
<img src=" 图 像 文件 的 地 址 "> 
语法 解释 


在 该 语法 中 ，src 参数 用 来 设置 图 像 文件 所 在 的 路 径 ， 这 一 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 


例 6.1 实例 代码 (实例 位 置 ， 光盘 \TMN\sN6\1) 


<html> 
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<head> 
<title> 插 入 图 像 文件 </title> 
</head> 
<body> 
<h3> 编 程 词典 ， 精 彩 无 限 </h3> 
&nbsp;&nbsp; 编 程 词典 个 人 版 是 一 套 学 、 查 、 用 为 一 体 的 数字 化 学 习 编程 软件 。 科 学 的 学 习 模式 、 系 统 的 学 
习 方 案 ， 实 现 快速 学 习 、 快 速 提高 ， 真 正 做 到 理论 与 实践 相 结 合 。 海 量 的 数据 资源 ， 帮 助 您 解决 在 学 习 编程 语言 
中 遇 到 的 问题 。 丰 富 的 实战 资源 ， 包 括 视频 、 应 用 范例 、 模 块 和 项 目 源码 ， 既 能 够 作为 学 习 的 资料 ， 也 可 以 应 用 
到 实战 中 。 
<br/> 
<!-- 在 该 页 面 中 居中 插入 一 张 编程 词典 的 图 片 --> 
<center> 
<img src="images/1.jpg" /> 
</center> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 页 面 中 插入 了 图 片 ， 如 图 6.1 所 示 。 如 果 不 通过 <br> 标 记 进行 换行 操作 ， 
那么 图 片 不 会 自动 换行 。 


6.3 设置 图 像 属性 


Bl 教学 录像 : 光盘 \TM\Ix\G\ 设 置 图 像 属性 .exe 
在 网 页 中 直接 插入 图 片 时 ， 图 像 的 大 小 和 原 图 是 相同 的 ， 而 在 实际 应 用 时 可 以 通过 各 种 图 像 属 性 
的 设置 调整 图 像 的 大 小 、 分 辨 率 等 内 容 。 


6.3.1 图像 高 度 一 一 height 


通过 height 属性 可 以 设置 图 片 显 示 的 高 度 ， 默 认 情 况 下 ， 改 变 高 度 的 同时 ， 其 宽度 也 会 等 比例 进 
行 调整 。 
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语法 

<img src=" 图 像 文件 的 地 址 "height=" 图 像 的 高 度 "> 
语法 解释 

在 该 语法 中 ， 图 像 的 高 度 单位 是 像素 。 

例 6.2 实例 代码 (实例 位 置 : 光盘 \TM'NsIN6\2) 


<html> 
<head> 
<title> 插 入 图 像 文件 </title> 
</head> 
<body> 

<h3> 编 程 词典 ， 精 彩 无 限 </h3> 

&nbsp;&nbsp; 编 程 词典 个 人 版 是 一 套 学 、 查 、 用 为 一 体 的 数字 化 学 习 编 程 软件 。 科 学 的 学 习 模式 、 系 统 的 学 
习 方 案 ， 实 现 快速 学 习 、 快 速 提高 ， 真 正 做 到 理论 与 实践 相 结合 。 海 量 的 数据 资源 ， 帮 助 您 解决 在 学 习 编程 语言 
中 遇 到 的 问题 。 丰 富 的 实战 资源 ， 包 括 视频 、 应 用 范例 、 模 块 和 项 目 源码 ， 既 能 够 作为 学 习 的 资料 ， 也 可 以 应 用 
到 实战 中 。 
<br/> 

< 上 -在 该 页 面 中 居中 插入 一 张 编程 词典 的 图 片 --> 

<center> 

<!-- 默 认 的 图 片 大 小 --> 

<img src="images/1.jpg" /> 

<!-- 设 置 图片 的 高 度 为 160 像素 --> 
<img src="images/1.jpg” height="160"/> 

</center> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 设置 了 高 度 的 图 片 大 小 改变 的 效果 ， 如 图 6.2 所 示 。 


Se owe Pp- exe ses "a 


篇 程 词典 ， 精 彩 无 限 


图 6.2 调整 图 片 的 高 度 


6.3.2 图像 宽度 一 一 width 
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图 像 宽 度 的 属性 与 图 像 高 度 类 似 ， 同 样 是 用 来 调整 图 像 大 小 的 。 


第 6 章 使 用 图 像 
语法 
<img src=" 图 像 文 件 的 地 址 "width=" 图 像 的 宽度 "> 
语法 解释 
在 该 语法 中 ， 图 像 的 宽度 单位 是 像素 。 如 果 在 使 用 属性 的 过 程 中 ， 只 设置 了 高 度 或 宽度 ， 则 另 一 


个 参数 会 等 比例 变化 。 如 果 同 时 设置 两 个 属性 ， 且 缩放 比例 不 同 的 情况 下 ， 图 像 很 可 能 会 变形 。 


例 6.3 ”下面 通 过 实例 说 明 同时 设置 两 个 属性 的 效果 。 《实例 位 置 : 光盘 \TMNsIN6\3) 


<html> 
<head> 
<title> 插 入 图 像 文件 </title> 
</head> 
<body> 

<h3> 编 程 词典 ， 精 彩 无 限 </h3> 

&nbsp;&nbsp; 编 程 词典 个 人 版 是 一 套 学 、 查 、 用 为 一 体 的 数字 化 学 习 编程 软件 。 科 学 的 学 习 模式 、 系 统 的 学 
习 方案 ， 实 现 快速 学 习 、 快 速 提高 ， 真 正 做 到 理论 与 实践 相 结合 。 海 量 的 数据 资源 ， 帮 助 您 解决 在 学 习 编程 语言 
中 遇 到 的 问题 。 丰 富 的 实战 资源 ， 包 括 视频 、 应 用 范例 、 模 块 和 项 目 源码 ， 既 能 够 作为 学 习 的 资料 ， 也 可 以 应 用 
到 实战 中 。 
<br /> 

< 上 -在 该 页 面 中 居中 插入 两 张 编程 词典 的 图 片 -> 

<center> 

<!-- 设 置 图 片 的 宽度 为 160 像素 --> 

<img src="images/1.jpg” width="160"/> 

<!-- 同 时 设置 图 片 的 高 度 和 宽度 --> 
<img src="images/1.jpg" height="100" width="120"/> 

</center> 
</body> 
</html> 


运行 这 段 代码 ,可 以 看 到 设置 了 宽度 的 图 片 大 小 改变 的 效果 ， 如 图 6.3 所 示 。 在 该 图 中 ， 第 一 张 图 


片 只 设置 了 图 像 的 宽度 ， 因 此 它 被 等 比例 缩小 ， 而 第 二 张 图 片 同时 设置 了 图 片 的 高 度 和 宽度 ， 而 且 缩 


小 的 比例 不 同 ， 因 此 造成 了 图 片 被 压 扁 的 效果 。 


图 6.3 设置 图 像 的 大 小 


6.3.3 ”图 像 边 框 一 一 border 


在 默认 情况 下 ， 页 面 中 插入 的 图 像 是 没有 边框 的 ， 可 以 通过 border 属性 为 图 像 添加 边框 。 
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语法 

<img src=" 图 像 文 件 的 地 址 " border=" 图 像 边 框 的 宽度 "> 

语法 解释 

在 该 语法 中 ，src 是 图 像 文 件 的 地 址 ， 是 不 可 缺少 的 。border 属性 的 单位 是 像素 。 
例 6.4 实例 代码 (实例 位 置 :光盘 \TMN\sN\6\4) 


<html> 
<head> 
<title> 设 置 图 像 边 框 </title> 
</head> 
<body> 

<h3> 编 程 词典 ， 精 彩 无 限 </h3> 

<hr size="2" /> 

&nbsp;&nbsp; 编 程 词典 个 人 版 是 一 套 学 、 查 、 用 为 一 体 的 数字 化 学 习 编 程 软件 。 科 学 的 学 习 模式 、 系 统 的 学 
习 方 案 ， 实 现 快速 学 习 、 快 速 提高 ， 真 正 做 到 理论 与 实践 相 结 合 。 海 量 的 数据 资源 ， 帮 助 您 解决 在 学 习 编程 语言 
中 遇 到 的 问题 。 丰 富 的 实战 资源 ， 包 括 视频 、 应 用 范例 、 模 块 和 项 目 源码 ， 既 能 够 作为 学 习 的 资料 ， 也 可 以 应 用 
到 实战 中 。 
<br/> 

< 上 -在 该 页 面 中 居中 插入 两 张 编程 词典 的 图 片 -> 

<center> 

<!-- 不 设置 图 片 的 边框 的 图 片 --> 

<img src="images/1.jpg" /> 

<!-- 设 置 图 片 的 边框 为 3 像素 --> 
<img src="images/1.jpg” border="3"/> 

</center> 
</body> 
</html> 


运行 这 段 代码 , 效果 如 图 6.4 所 示 。 可 以 看 到 在 右 侧 图 像 的 周围 添加 了 边框 的 效果 ,边框 的 宽度 为 
3 像素 。 


图 6.4 设置 图 像 的 边框 
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6.3.4 ”图 像 水 平 间距 一 一 hspace 


如 果 不 使 用 <br> 或 <p> 标 记 进行 换行 显示 ,那么 添加 的 图 像 会 紧 跟 在 文字 之 后 。 而 图 像 与 文字 之 间 
的 水 平 距 离 是 可 以 通过 hspace 参数 进行 调整 的 。 通过 调整 间距 , 可 以 使 文字 和 图 像 的 排版 不 那么 拥挤 ， 
看 上 去 更 加 协调 。 

语法 

<img src=" 图 像 文件 的 地 址 " hspace=" 水 平 间 距 "> 

语法 解释 


在 该 语法 中 ，src 是 图 像 文件 的 地 址 ， 是 不 可 缺少 的 。hspace 属性 的 单位 是 像素 。 
例 6.5 实例 代码 〈 实 例 位 置 ， 光盘 \TMINsI6\S) 


<html> 

<head> 

<title> 设 置 图 像 的 水 平 间距 </title> 
</head> 

<bod 


y> 
<h3> 请 选择 您 喜欢 的 头像 : </h3> 
<hr size="2" /> 
<!-- 在 页 面 中 居中 插入 2 行 图 片 --> 
<!-- 不 设置 图 片 水 平 间距 的 效果 --> 
人 物 头 像 <img src="images/01.gif" border="2" /> 
<img src="images/02.gif" border="2" /> 
<img src="images/03.gif" border="2" /> 
<img src="images/04.gif" border="2" /> 
<br/><br/> 
<!-- 设 置 图 片 的 水 平 间 距 为 20 像素 --> 
另外 一 组 人 物 头像 <img src="images/8.gif' border="2"” hspace="20"/> 
<img src="images/9.gif" border="2" hspace="20"/> 
<img src="images/10.gif" border="2” hspace="20"/> 
<img src="images/11.gif' border="2" hspace="20"/> 
</body> 
</html> 


运行 代码 的 效果 如 图 6.5 所 示 , 其 中 第 一 组 人 物 头 像 没 有 设置 水 平 间距 , 图 片 和 文字 紧 紧 地 连 在 一 
起 ， 第 二 组 头像 设置 了 20 像素 的 间距 ， 图 像 与 文字 就 显得 不 那么 拥挤 了 。 


L onsenera 


t 


Oo se 


计 选 择 您 专区 的 头像- 


图 6.5 设置 图 像 的 水 平 间距 
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6.3.5 ”图 像 垂 直 间 距 一 一 vspace 


图 像 和 文字 之 间 的 距离 是 可 以 调整 的 ，vspace 属性 用 来 调整 图 像 和 文字 之 间 的 上 下 距离 ， 有 效 地 
避免 了 网 页 上 文字 、 图 像 拥挤 的 排版 。 


语法 
<img src=" 图 像 文 件 的 地 址 " vspace=" 垂 直 间距 "> 
语法 解释 


在 该 语法 中 ，vspace 属性 的 单位 是 像素 。 
例 6.6 实例 代码 (实例 位 置 ， 光盘 \TMN\sN\6\6) 


<html> 
<head> 
<title> 设 置 图 像 的 垂直 间距 </title> 
</head> 
<body> 
<img src="images/1.jpg" vspace="30" /> 编程 词典 个 人 版 是 一 套 学 、 查 、 用 为 一 体 的 数字 化 学 习 编 程 软件 。 
科学 的 学 习 模 式 、 系 统 的 学 习 方 案 ， 实 现 快速 学 习 、 快 速 提高 ， 真 正 做 到 理论 与 实践 相 结 合 。 海 量 的 数据 资源 ， 
帮助 您 解决 在 学 习 编 程 语言 中 遇 到 的 问题 。 丰 富 的 实战 资源 ， 包 括 视频 、 应 用 范例 、 模 块 和 项 目 源码 ， 既 能 够 作 
为 学 习 的 资料 ， 也 可 以 应 用 到 实战 中 。 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 6.6 所 示 ， 为 图 像 设置 了 30 像素 的 垂直 间距 。 


图 6.6 设置 图 像 的 垂直 间距 


6.3.6 ”图 像 相 对 于 文字 基准 线 的 对 齐 方式 一 一 align 


图 像 和 文字 之 间 的 排列 通过 align 参数 来 调整 。 图 像 的 绝对 对 齐 方式 与 相对 文字 的 对 齐 方式 不 同 ， 
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绝对 对 齐 方式 包括 左 对 齐 、 右 对 齐 和 居中 对 齐 3 种 ， 而 相对 文字 对 齐 方式 则 是 指 图 像 与 一 行文 字 的 相 
对 位 置 。 


语法 
<img src=" 图 像 文 件 的 地 址 " align=" 相 对 文字 的 对 齐 方式 "> 
语法 解释 
在 该 语法 中 ，align 的 取 值 如 表 6.1 所 示 。 
表 6.1 图 像 相 对 文字 的 对 齐 方式 
align 取 值 对 齐 方 式 


top 把 图 像 的 项 部 和 同行 的 最 高 部 分 对 齐 〈 可 能 是 文本 的 项 部， 也 可 能 是 图 像 的 顶部 ) 
middle 把 图 像 的 中 部 和 同行 的 中 部 对 齐 《 通 常 是 文本 行 的 基线 ， 并 不 是 实际 的 行 的 中 部 ) 
bottom 把 图 像 的 底部 和 同行 文本 的 底部 对 齐 
texttop 把 图 像 的 顶部 和 同行 中 最 高 的 文本 的 顶部 对 齐 
absmiddle 把 图 像 的 中 部 和 同行 中 最 大 项 的 中 部 对 齐 
baseline 把 图 像 的 底部 和 文本 的 基线 对 齐 
absbottom 把 图 像 的 底部 和 同行 中 最 低 项 的 底部 对 齐 
left 使 图 像 和 左边 界 对 齐 〈 文 本 环绕 图 像 ) 
right 使 图 像 和 右边 界 对 齐 〈 文 本 环绕 图 像 ) 
例 6.7 实例 代码 (实例 位 置 光盘 \TM\sN6\7) 
<html> 
<head> 
<title> 设 置 图 像 与 文字 的 相对 位 置 </title> 
</head> 
<body> 


<font size="+3" color="#FF66CC"> 玫 瑰 的 生长 过 程 </font> 
<!-- 图 像 的 底部 与 文字 的 底部 对 齐 --> 
<img src="images/001.gif" align="bottom" /> 
<!-- 图 像 的 中 部 与 文字 的 中 部 对 齐 --> 
<img src="images/002.gif" align="middle" /> 
<!-- 图 像 的 项 部 与 同行 中 最 高 的 文字 的 顶部 对 齐 --> 
<img src="images/003.gif" align="texttop" /> 
<!-- 图 像 的 中 部 与 同行 中 最 大 项 的 中 部 对 齐 --> 
<img src="images/004.gif" align="absmiddle" /> 
<!-- 图 像 的 底部 与 文字 的 基线 对 齐 --> 
<img src="images/005.gif" align="baseline"/> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 在 水 平 线 上 面 是 文字 与 图 像 的 相对 垂直 位 置 的 变化 效果 ， 如 图 6.7 所 示 。 
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玫瑰 的 生长 过 程 


图 6.7 设置 图 像 与 文字 的 相对 位 置 


6.3.7 图像 的 提示 文字 一 一 alt 


提示 文字 有 两 个 作用 : 第 一 ， 当 浏览 该 网 页 时 ， 如 果 图 像 下 载 完 成 ， 光 标 放 在 该 图 像 上 片刻 就 会 
出 现 提示 文字 ;第 二 ， 如 果 图 像 没 有 被 下 载 ， 在 图 像 的 位 置 上 就 会 显示 提示 文字 。 


语法 
<img src=" 图 像 文件 的 地 址 " alt=" 提 示 文 字 的 内 容 "> 
语法 解释 


在 该 语法 中 ， 提 示 文 字 的 内 容 可 以 是 中 文 ， 也 可 以 是 英文 。 
例 6.8 实例 代码 〈 实 例 位 置 : 光盘 \TM\sN\6\8) 


<html> 
<head> 
<title> 为 图 像 添加 提示 文字 </title> 
</head> 
<body> 

<h3> 编 程 词典 个 人 版 简介 </h3> 

<img src="images/1.jpg" hspace="20" align="left" alt=" 编 程 词典 个 人 版 ， 是 今年 明日 科技 主推 的 产品 " /> 简 
介 : 编程 词典 个 人 版 是 一 套 学 、 查 、 用 为 一 体 的 数字 化 学 习 编程 软件 。 科 学 的 学 习 模 式 、 系 统 的 学 习 方案 ， 实 现 
快速 学 习 、 快 速 提高 ， 真 正 做 到 理论 与 实践 相 结 合 。 海 量 的 数据 资源 ， 帮 助 您 解决 在 学 习 编 程 语言 中 遇 到 的 问题 。 
丰富 的 实战 资源 ， 包 括 视频 、 应 用 范例 、 模 块 和 项 目 源码 ， 既 能 够 作为 学 习 的 资料 ， 也 可 以 应 用 到 实战 中 。 
</body> 
</html> 


运行 这 段 代 码 ， 当 鼠标 位 于 图 像 上 面 时 可 以 看 到 添加 的 说 明文 字 ， 如 图 6.8 所 示 。 


如 果 图 片 由 于 下 载 或 者 路 径 的 问题 无 法 显示 ， 也 可 以 在 图 片 的 位 置 显 示 定 义 的 说 明 提 示 文 字 ， 如 
图 6.9 所 示 。 
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EC 
编程 词典 个 人 版 简介 


四， 
有 


编程 词 束 个 人 版 是 一 大 学 


入 人 部 


全 的 学 习 剖 球 、 系 统 的 学 习 方案 ,实现 忆 ; 与 立足 相 结 
病 尼 司 磊 个 人 版 ， 是 明日 科技 的 今年 主 撞 的 产品 可 资源 , 和 


海量 的 中 题 。 丰富 的 实 | 
全、 应 用 范例 、 模 次 和 项 目 源码 ， 和 也 可 以 应 用 到 实战 


图 6.8 图 像 的 提示 文字 图 6.9 图 片 无 法 显示 时 的 说 明文 字 


6.4 图 像 的 超 链 接 


区 教学 录像 ， 光盘 \TM\Ix\G\ 图 像 的 超 链接 .exe 
除了 文字 可 以 添加 超 链 接 之 外 ， 图 像 也 可 以 设置 超 链接 属性 。 而 一 幅 图 像 可 以 切 分 成 不 同 的 区 域 
(也 称 热 区 ) 设置 链接 ， 因 此 一 幅 图 像 也 就 可 以 设置 多 个 链接 地 址 。 


6.4.1 设置 图 像 的 超 链接 


对 于 给 整 幅 图 像 文件 设置 超 链接 来 说 ， 实 现 的 方法 比较 简单 ， 其 实现 的 方法 与 文本 链接 类 似 。 


语法 

<a href=" 链 接地 址 " target=" 目 标 窗口 的 打开 方式 "><img src=" 图 像 文件 的 地 址 "></a> 

语法 实例 

在 该 语法 中 ，href 参数 用 来 设置 图 像 的 链接 地 址 ， 而 在 图 像 属 性 中 可 以 添加 图 像 的 其 他 参数 ， 如 
height、border、hspace 等 。 

例 6.9 下 面 通过 实例 来 讲解 一 下 图 像 的 超 链 接 , 该 实例 的 第 一 个 页 面 index.html 是 一 幅 中 国 地 图 ， 
单 击 该 页 面 中 的 图 像 ， 可 以 链接 到 一 个 介绍 中 国 的 文字 页 面 china.html。 (实例 位 置 : 光盘 \TMIsl\6\9) 

实例 中 index.html 文件 的 代码 如 下 。 

<html> 

<head> 

<title> 为 图 像 添加 超 链接 </title> 

</head> 


<body> 
<h3><center> 古 老 、 神 秘 的 中 国 </center></h3> 
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<center> 
<a href="china.html"><img src="images/map.jpg" alt=" 中 国 " /></a> 
</center> 

</body> 

</html> 


实例 中 china.html 文件 的 代码 如 下 。 


<html> 

<head> 

<title> 给 图 像 添加 超 链接 </title> 

</head> 

<body> 
<h3><center> 四 大 文明 古国 之 
<hr size="2" color="#FF0000" /> 
&nbsp;&nbsp; 中 华人 民 共 和 国 ， 简 称 中 国 ， 位 于 亚洲 大 陆 东 部 ， 太 平 洋 西岸 。 陆 地 面积 约 960 万 平方 公里 ， 

在 亚洲 ， 是 面积 最 大 的 国家 ， 在 世界 上 ， 是 仅 次 于 俄罗斯 和 加 拿 大 的 第 三 大 国家 。 

</body> 

</html> 


运行 文件 index.html， 可 以 看 到 打开 的 页 面 中 包含 一 幅 中 国 地 图 ， 当 鼠标 指针 停留 在 图 片上 方 时 ， 
现 “ 中 国 ” 的 提示 文字 ， 如 图 6.10 所 示 。 


中 国 </center></h3> 


只 


在 图 像 中 单 击 鼠 标 ， 页 面 将 会 跳 转 到 china.html 页 面 ， 效 果 如 图 6.11 所 示 。 


吉 bebe 
Ca ewes P- ox F 了 me 全 


| XD we HR) tix IRM mm | 
古老 、 神 秘 的 中 国 1 


| FWppSe\wwwir DP” © X| Esha x ES 
文件 由 蜗 多 (可 看 (V) 收 基 关 (A) 工具 MT 大助 (H) 


四 大 文明 古国 之 一 一 一 中 国 


中 华人 民 共 和 国 ， 简 称 中 国 ， 镁 于 亚洲 大 陆 东 部 ， 太 平 洋 西 岸 。 陆 
岛 | 地 面积 的 960 万 平方 公里 ， 在 亚洲 ， 星 面积 最 大 的 国家 ， 在 世界 上 , 是 
file:///DY/AppServ/www/me/6/china.html 仅 次 于 狼 罗 斯 和 加 拿 大 的 第 三 大 国家 。 


图 6.10 图 像 链接 页 面 的 效果 图 6.11 图 像 超 链接 的 跳 转 页 面 


6.4.2 ”设置 图 像 热 区 链接 


除了 可 对 整 幅 图 像 进行 超 链接 的 设置 外 ， 还 可 以 将 图 像 划分 成 不 同 的 区 域 进行 链接 设置 。 
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语法 

首先 需要 在 图 像 文 件 中 设置 映射 图 像 〈 即 包含 热 区 的 图 像 ) 名 ， 在 图 像 的 属性 中 使 用 <usemap> 标 
记 添 加 图 像 要 引用 的 映射 图 像 的 名 称 ， 语 法 如 下 。 

<img src=" 图 像 地 址 " usemap=" 映 射 图 像 名 称 "> 

然后 需要 定义 热 区 图 像 以 及 热 区 的 链接 属性 ， 语 法 如 下 。 


<map name=" 映 射 图 像 名 称 "> 
<area shape=" 热 区 形状 " coords=" 热 区 坐标 " href=" 链 接地 址 " /> 
</map> 


语法 解释 


在 该 语法 中 要 先 定义 映射 图 像 的 名 称 ， 然 后 再 引用 这 个 映射 图 像 。 在 <area> 标 记 中 定义 了 热 区 的 
位 置 和 链接 ， 其 中 shape 用 来 定义 热 区 形状 ， 可 以 取 值 为 rect (矩形 区 域 ) 、circle〈 圆 形 区 域 ) 以 及 
poly (多 边 形 区 域 》; coords 参数 则 用 来 设置 热 区 坐标 ， 对 于 不 同形 状 ，coords 设置 的 方式 也 不 同 。 

对 于 和 矩形 区 域 rect 来 说 ，coords 包含 4 个 参数 ， 分 别 为 left、top、right 和 bottom， 也 可 以 将 这 4 
个 参数 看 作 和 矩形 两 个 对 角 的 点 坐标 ; 对 于 圆 形 区 域 circle 来 说 ，coords 包含 3 个 参数 ， 分 别 为 center-x、 
center-y 和 tadius， 也 可 以 看 作 圆 形 的 圆心 坐标 (xy) 与 半径 的 值 ; 对 于 多 边 形 区 域 poly 设置 坐标 参数 
比较 复杂 ， 与 多 边 形 的 形状 息息相关 。coords 参数 需要 按照 顺序 〈 可 以 是 逆 时 针 ， 也 可 以 是 顺 时 针 ) 
取 各 个 点 的 x、y 坐标 值 。 

例 6.10 ”由 于 定义 坐标 比较 复杂 而 且 难 以 控制 ， 一 般 情 况 下 可 以 使 用 可 视 化 软件 进行 这 种 参数 的 
设置 。〈 实 例 位 置 : 光盘 \TMNsI\6\10) 

具体 步骤 如 下 。 

(1) 编写 一 个 HTML 文件 ， 代 码 如 下 。 


<html> 
<head> 
<title> 给 图 像 添 加 超 链接 </title> 
</head> 
<body> 
<h2><center> 古 老 的 中 国 </center></h2> 
<center><img src="images/map.jpg" border="0" usemap="#map" /> 
<map name="map" id="map"> 
<area shape="rect" coords="272,108,301,126" href="#beijing" alt=" 北 京 " /> 
<area shape="circle" coords="342,205,11" href="#shanghai" alt=" 上 海 " /> 
<area shape="circle" coords="352,93,15" href="#changchun" alt=" 长 春 " /> 
</map> 
<br/><br/></center> 
<hr color="#0099FF" size="3"/> 
&nbsp;&nbsp; 中 华人 民 共 和 国 ， 简 称 中 国 ， 位 于 亚洲 大 陆 东 部 ， 太 平 洋 西岸 。 陆 地 面积 约 960 万 平方 公里 ， 
在 亚洲 ， 是 面积 最 大 的 国家 ， 在 世界 上 ， 是 仅 次 于 俄罗斯 和 加 拿 大 的 第 三 大 国家 。<br/><br/> 
<font color="#CC3333" size="+3"><a name="beijing"> 北 京 </a></font><br/><br/> 
&nbsp;&nbsp; 北 京 市 简称 京 ， 是 中 华人 民 共 和 国 的 首都 ， 直 辖 市 之 一 ， 全 国政 治 、 文 化 和 国际 交流 中 心 。 北 
京 位 于 华北 平原 北端 ， 东 南 与 北方 经 济 中 心 天 津 相连 ,其余 为 河北 省 所 环绕 。 其 常住 人 口 接近 2000 万 ， 居 中 国 第 
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二 。 北 京 有 着 3000 余年 的 建城 史 和 850 余年 的 建 都 史 ， 是 “中 国 四 大 古都 ”之 一 ， 其 最 早 见 于 文献 的 名 称 叫做 
“ 葡 ”。 北 京 荟 共 了 自 元 明 清 以 来 的 中 华文 化 ， 拥 有 众多 名 胜 古 迹 和 人 文 景观 ， 是 全 球 拥有 世界 文化 遗产 最 多 的 
城市 。 今 天 的 北京 拥有 41 家 世界 500 强 企业 总 部 ， 位 居 全 球 第 二 。<br/><br/> 

<font color="#CC3333" size="+3"><a name="shanghai" > 上海 </a></font><br/><br/> 

&nbsp;&nbsp; 上 海 ， 中 国 大 陆 第 一 大 城市 ， 四 个 中 央 直辖 市 之 一 ， 是 中 国 大 陆 的 经 济 、 金 融 、 贸 易 和 航 

运 中 心 。 上 海 创造 和 打破 了 中 国 世界 纪录 协会 多 项 世界 之 最 。 上 海 位 于 我 国 大 陆 海 岸 线 中 部 的 长 江口 ， 拥 有 中 国 
最 大 的 外 贸 港口 、 最 大 的 工业 基地 。 有 超过 2000 万 人 居住 和 生活 在 上 海地 区 ， 其 中 大 部 分 属 汉族 江浙 民 系 ， 通 行 
吴语 上 海 话 。 上 海 又 是 一 处 新 兴 的 旅游 目的 地 ， 具 有 深厚 的 近代 城市 文化 底蕴 和 众多 的 历史 古迹 。 如 今 上 海 已 经 
发 展 成 为 一 个 闪耀 全 球 的 国际 化 大 都 市 ， 并 致力 于 在 2020 年 建设 成 为 国际 金融 中 心 和 航运 中 心 。 上 海 是 2010 年 
世界 博览 会 举办 城市 。<br/><br/> 

<font color="#CC3333" size="+3"><a name="changchun"> 我 的 家 乡 长 春 </a></font><br/><br/> 

&nbsp;&nbsp; 长春， 吉林 省 省 会 ， 全 省 政治 、 经 济 、 文 化 和 交通 中 心 ， 中 国 最 大 的 汽车 工业 城市 ， 有 “东方 
底特律 ”之 称 。 中 国 建成 区 面积 和 建成 区 人 口 第 九 大 城市 。 中 国 特大 城市 之 一 。 
</body> 
</html> 


(2) 启动 Adobe Dreamweaver CS5.5， 选 择 “ 文 件 ”|“ 打 开 ” 命 令 ， 弹 出 “打开 ”对 话 框 ， 在 对 


话 框 中 选择 刚才 编写 的 HTML 文件 ， 单 击 “ 打 开 ” 按 钮 打开 HTML 文件 ， 效 果 如 图 6.12 所 示 。 
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图 6.12 打开 的 文件 


(3) 在 属性 面板 中 设置 “地 图 ”的 值 为 map， 也 就 是 定义 图 像 要 引用 的 映射 图 像 名 。 
(4) 为 了 显示 各 种 热 区 的 效果 ， 这 里 将 不 同 的 热 区 设置 为 不 同 的 形状 。 选 择 “ 拢 形 热点 工具 ” 选 


项 ， 拖 动 鼠 标 左 键 在 “北京 ”的 位 置 上 绘制 出 一 个 矩形 区 域 ， 如 图 6.13 所 示 。 


(5) 在 “链接 ”文本 框 中 添加 链接 地 址 “#beijing”， 在 “替换 ”文本 框 设 置 选区 的 提示 文字 为 


“北京 ”。 


(6) 再 次 单 击 图 片 ， 选 择 “ 多 边 形 热点 工具 ”选项 ， 设 置 两 个 椭圆 形 选区 ， 分 别 设置 链接 地 址 为 


“#shanghai” 和 “#changchun”， 然 后 设置 对 应 的 提示 文字 为 “上 海 ” 和 “长 春 ”。 


(7) 完成 后 保存 文件 ， 使 用 浏览 器 运行 这 个 文件 。 当 鼠标 指针 位 于 某 一 个 热 区 上 方 时 ， 会 出 现 该 


热 区 的 提示 文字 与 链接 标志 也 ， 效 果 如 图 6.14 所 示 。 
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单 击 上 海 所 在 的 热 区 ， 将 会 自动 跳 转 到 关于 上 海 的 介绍 文字 的 位 置 ， 如 图 6.15 所 示 。 运 行 其 他 热 
区 的 效果 类 似 ， 这 里 不 再 一 一 列举 。 
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图 6.13 绘制 矩形 区 域 
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- 乌有 世界 文化 迷 志 最 罗 乓 六 市 。 今 天 乓 北京 菜 有 341 家 世界 500 ~ 
古老 的 中 国 强 企业 总 部 ， 位 居 全 球 第 二 。 
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长 春 ， 吉 林 省 省 会 ， 全 省 政治 、 经 济 、 文 化 和 交通 中 心 ， 中 国 最 
太 的 汽车 工业 城市 ， 有 “东方 底特律 ” ey 中 轿 江 到 前 积 和 建 
成 区 人 口 第 九 大 城市 。 中 国 特大 城市 之 


图 6.14 运行 文件 的 效果 图 6.15 ” 跳 转 到 热 区 的 链接 地 址 


重新 打开 源 文件 ， 可 以 看 到 在 源 文件 添加 图 像 的 代码 中 增加 了 部 分 内 容 。 在 原来 的 文件 代码 中 插 
入 图 像 的 代码 如 下 。 


<map name="map" id="map"> 
<area shape="rect" coords="272,108,301,126" href="#beijing" alt=" 北 京 " /> 
<area shape="circle" coords="342,205,11" href="#shanghai" alt=" 上 海 " /> 
<area shape="circle" coords="352,93,15" href="#changchun" alt=" 长 春 " /> 
</map> 


a 
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这 段 代 码 就 是 设置 热 区 的 关键 代码 ， 在 这 段 代 码 中 设置 了 3 个 不 同形 状 的 热 区 ， 并 分 别 为 这 些 热 
区 设 定 了 链接 地 址 和 提示 文字 。 


6.5 小 结 


本 章 主要 讲解 了 如 何在 HTML 中 添加 图 像 、 对 图 像 进行 相关 的 设置 ， 以 及 图 像 的 超 链接 。 掌 握 了 
本 章 的 内 容 ， 就 会 对 图 像 的 操作 应 用 自如 。 图 像 在 网 页 中 占有 举足轻重 的 地 位 ， 绚 丽 网 站 的 建立 离 不 
开 图 像 。 所 以 读者 要 仔细 学 习 本 章 内 容 ， 并 能 熟练 应 用 。 


6.6 习 题 
选择 题 
1. HTML 代码 <img src="name" align=?> 表 示 ( 7 
A. 添加 一 个 图 像 B. 排列 对 齐 一 个 图 像 
C. 设置 围绕 一 个 图 像 的 边框 的 大 小 D. 加 入 一 条 水 平 线 
2. HTML 代码 <img src="name" border=?> 表 示 ( 人 
A.， 添加 一 个 图 像 B. 排列 对 齐 一 个 图 像 
C. 调整 图 像 与 文字 的 垂直 距离 D. 加 入 一 条 水 平 线 
3. 设置 围绕 一 个 图 像 的 边框 的 大 小 的 标记 是 (。 )。 
A. <img src="name" border=?></img> B. <img src="name" border=?> 
C. <img src="name" heigh=?> D. <img src="name" bordersize=?> 
4. HTML 语言 中 ， 插 入 图 像 的 HTML 代码 是 <img src="">， 其 中 src 的 含义 是 ( he 
A， 链接 的 地 址 B. 图 像 的 路 径 
C. 所 插入 图 像 的 属性 D. 以 上 都 正确 


5. 在 设置 图 像 超 链接 时 , 可 以 在 Alt 文本 框 中 填 入 注释 的 文字 ， 下 面 不 是 其 作用 的 是 (  ) 。 
A. 当 浏览 器 不 支持 图 像 时 ， 使 用 文字 替换 图 像 
B. 当 鼠 标 指针 移 到 图 像 上 并 停留 一 段 时 间 后 ， 这 些 注释 文字 将 显示 出 来 
C. 在 浏览 者 关闭 图 像 的 显示 功能 时 ， 使 用 文字 替换 图 像 
D. 每 过 一 段 时 间 图 像 上 都 会 定时 显示 注释 的 文字 
6. 下面 对 JPEG 格式 描述 不 正确 的 一 项 是 (  ) 。 
A. 照片 、 油 画 和 一 些 细腻 、 讲 求 色彩 浓淡 的 图 片 常 采用 JPEG 格式 
B. JPEG 支持 很 高 的 压缩 率 ， 因 此 其 图 像 的 下 载 速度 非常 快 
C. 最 高 只 能 以 256 色 显 示 的 用 户 可 能 无 法 观看 JPEG 图 像 
D. 采用 JPEG 格式 对 图 片 进 行 压缩 后 ， 还 能 再 打开 图 片 ， 然 后 对 它 重新 整 饰 、 编 辑 、 压 缩 
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判断 题 


7， 常用 的 网 页 图 像 格式 有 GIF 和 JPG。 ( ) 
8. HTML 语言 可 以 直接 描述 图 像 上 的 像素 。 ( ) 


填空 题 
9. 插入 图 片 <img src=" 图 形 文件 名 "> 标记 中 的 src 英文 单词 是 _ __。 


10. 设 定 图 片上 下 留 空 的 属性 是 ; 设 定 图 片 左右 留 空 的 属性 是 。 


un 


第 


凯 


表格 的 应 用 


( 铝 ! 教 学 录像 : 48 分 钟 ) 


表格 是 HTML 中 的 一 项 非常 重要 的 功能 ， 利 用 其 多 种 属性 能 够 设计 出 多 样 化 
的 表格 ， 可 以 说 表格 是 网 页 排版 的 灵 殊 。 同 时 由 于 表格 包含 的 功能 比较 多 ， 因 此 需 
要 读者 认真 学 习 才 能 党 担 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 

叫 ”掌握 表格 的 创建 方法 

H| 熟悉 表格 的 属性 设置 

WH ”熟悉 表格 的 结构 

MH ”掌握 表格 的 岩 套 结构 
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7.1 创建 表格 


攻 教学 录像 : 光盘 \TIM\Ix\ 八 创建 表格 .exe 


7.1.1 表格 的 基本 构成 一 一 table、tr、td 


表格 是 用 于 排列 内 容 的 最 佳 手段 ， 在 HTML 页 面 中 ， 绝 大 多 数 页 面 都 是 使 用 表格 进行 排版 的 。 


在 HTML 的 语法 中 ， 表 格 主要 由 表格 标记 、 行 标记 、 单 元 格 标记 构成 ， 具 体 说 明 如 表 7.1 所 示 。 
表 7.1 表格 标记 
标 记 描述 
<table>...</table> 表格 标记 
<tr>...</tr> 行 标记 
<td>...</td> 单元 格 标记 
其 


表格 标记 是 <table>.…</table>， 表 格 的 其 他 各 种 属性 都 要 在 表格 的 开始 标记 <table> 和 表格 的 结 
束 标记 </table> 之 间 才 有 效 。 下 面 首先 介绍 如 何 创建 表格 。 

语法 

<table> 
<tr> 


<td> 单 元 格 内 的 文字 </td> 
<td> 单 元 格 内 的 文字 <td> 


</tr> 
<tr> 


<td> 单 元 格 内 的 文字 </td> 
<td> 单 元 格 内 的 文字 </td> 


a 

<Hable> 

语法 解释 

<table> 和 </table> 标 记分 别 标志 着 一 个 表格 的 开始 和 结束 ; 而 <t> 和 </tr> 标 记 则 分 别 表示 表格 中 一 


行 的 开始 和 结束 ， 在 表格 中 包含 几 组 <tr>.….</ttr>， 就 表示 该 表格 为 几 行 ，<td> 和 </td> 标 记 表 示 一 个 单 
元 格 的 起 始 和 结束 ， 也 可 以 说 表示 一 行 中 包含 了 几 列 。 

实例 代码 

<html> 


<head> 
</head> 
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图 7. 


7.1 
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<body> 
<h3> 下 面 插入 了 一 个 表格 </h3> 
<table> 
<tr> 
<td> 这 是 表格 中 的 第 一 个 单元 格 </td> 
<td> 第 一 行 中 的 第 二 个 单元 格 </td> 
</tr> 
<tr> 
<td> 这 是 表格 的 第 二 行 </td> 
<td> 第 二 行 中 的 第 二 个 单元 格 </td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 在 网 页 中 添加 了 一 个 两 行 两 列 的 表格 ,但 是 这 个 表格 没有 边框 线 ， 如 
1 所 示 。 


a 
|e |e cv-tnm Do- ox] 
下 面 插入 了 一 个 表格 


这 是 表格 中 的 第 一 个 单元 格 各 一 行 中 的 第 二 个 单元 格 
这 是 表格 的 第 二 行 第 二 行 中 的 第 二 个 单元 格 


图 7.1 添加 表格 


.2 ”表格 的 标题 


caption 


除了 <td> 和 </td> 可 用 来 设置 表格 的 单元 格外 , 还 可 以 通过 caption 来 设置 一 种 特殊 的 单元 格 一 一 标 


题 单元 格 。 表 格 的 标题 一 般 位 于 整个 表格 的 第 一 行 ， 为 表格 添加 一 个 标题 行 ， 如 同 在 表格 上 方 加 一 个 


没有 
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边框 的 行 ， 通 常用 来 存放 表格 标题 。 
语法 
<caption> 表 格 的 标题 </caption> 
实例 代码 
<html> 
<head> 
</head> 
<body> 
<h3> 下 面 插入 了 一 个 表格 </h3> 
<table> 
<caption> 添 加 表格 的 实例 </caption> 
<tr> 
<td> 这 是 表格 中 的 第 一 个 单元 格 </td> 
<td> 第 一 行 中 的 第 二 个 单元 格 </td> 
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</tr> 
<tr> 
<td> 这 是 表格 的 第 二 行 </td> 
<td> 第 二 行 中 的 第 二 个 单元 格 </td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代 码 ， 看 到 在 表格 内 容 的 上 方 一 行 添 加 了 一 个 标题 “添加 表格 的 实例 ”， 这 


认 情 况 下 居中 显示 ， 如 图 7.2 所 示 。 


pp 
(a 
下 面 插入 了 一 个 表格 


添加 表格 的 实例 
这 是 表格 中 的 第 一 个 单元 格 第 一 行 中 的 第 二 个 单元 格 
这 是 表格 的 第 二 行 第 二 行 中 的 第 二 个 单元 格 


7.2 ”添加 表格 的 标题 


7.1; 


语法 
<html> 
<head> 
</head> 
<body> 
<table> 
<tr> 
<th> 表 格 的 表 头 </th> 
<th> 表 格 的 表 头 </th> 


</tr> 

<tr> 
<td> 单 元 格 内 的 文字 </td> 
<td> 单 元 格 内 的 文字 </td> 


</tr> 
</table> 
</body> 
</html> 


一 行 标题 默 


表格 中 还 有 一 种 特殊 的 单元 格 ， 称 为 表 头 。 表 头 一 般 位 于 表格 第 一 行 ， 用 来 表明 该 列 的 内 容 类 别 ， 
上 <th> 和 </th> 标 记 来 表示 。 与 <td> 标 记 的 使 用 方法 相同 ， 但 是 <th> 标 记 中 的 内 容 是 加 粗 显 示 的 。 
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实例 代码 


<html> 
<head> 
</head> 
<body> 
<h3> 下 面 公布 了 某 中 学 期 中 考试 的 成 绩 : </h3> 
<table> 
<caption> 期 中 考试 成 绩 表 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 
<th> 英 语 </th> 
<th> 物 理 </th> 
<th> 化 学 </th> 
</tr> 
<tr> 
<td> 李 1</td> 
<td>94</td> 
<td>89</td> 
<td>87</td> 
<td>56</td> 
<td>97</td> 
</tr> 
<tr> 
<td> 孙 2</td> 
<td>94</td> 
<td>87</td> 
<td>84</td> 
<td>86</td> 
<td>87</td> 
</tr> 
<tr> 
<td> 王 1</td> 
<td>82</td> 
<td>84</td> 
<td>87</td> 
<td>86</td> 
<td>77</td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代 码 ， 看 到 在 表格 中 包含 一 行 加 粗 字体 ， 这 就 是 表 头 ， 如 图 7.3 所 示 。 
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— 


是 DAmAN7-Lhtml DP - c x‖ 古 psmazv-Lhtml 


下 面 公 布 了 某 中 学 期 中 考试 的 成 绩 : 


期 中 考试 成 绩 表 
姓名 语文 数学 英语 物理 化 学 
李 194 89 87 56 97 
孙 2 94 87 84 86 87 
1 82 84 87 86 77 到 


图 7.3 显示 表 头 


7.2 设置 表格 基本 属性 


名 1 教学 录像 : 光盘 \TMNIx\T\ 设 置 表格 基本 属性 .exe 
表格 的 基本 属性 包括 表格 的 大 小 和 对 齐 方式 ， 下 面 将 分 别 加 以 说 明 。 


7.2.1 表格 的 宽度 一 一 width 


默认 情况 下 ， 表 格 的 宽度 是 根据 内 容 自动 调整 的 ， 用 户 也 可 以 手动 设置 表格 的 宽度 。 
语法 
<table width=" 表 格 宽度 "> 
语法 解释 
表格 宽度 的 值 可 以 是 具体 的 像素 数 ， 也 可 以 设置 为 浏览 器 的 百分比 数 。 
实例 代码 
<html> 
<head> 
<title> 设 置 表格 的 宽度 </title> 
</head> 
<body> 
<!-- 设 置 表格 的 宽度 为 400--> 
<table width="400"> 
<caption> 期 中 考试 成 绩 表 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 
<th> 英 语 </th> 
<th> 物 理 </th> 
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<th> 化 学 </th> 

</tr> 

<tr> 
<td> 李 1</td> 
<td>94</td> 
<td>89</td> 
<td>87</td> 
<td>56</td> 
<td>97</td> 

</tr> 

<tr> 
<td> 孙 2</td> 
<td>94</td> 
<td>87</td> 
<td>84</td> 
<td>86</td> 
<td>87</td> 

</tr> 

<tr> 
<td> 王 1</td> 
<td>82</td> 
<td>84</td> 
<td>87</td> 
<td>86</td> 
<td>77</td> 

</tr> 

</table> 
</body> 
</html> 


没有 设 定 表格 宽度 的 运行 效果 如 图 7.4 所 示 。 运行 这 段 代 码 ， 设 定 表格 的 宽度 以 后 ， 表 格 的 运行 效 
果 如 图 7.5 所 示 。 


"Wi 
Re 8) men- him PD © x | Dme7-Lhem 


T 
下 面 公布 了 某 中 学 期 中 考试 的 成 绩 : se 


期 中 考试 成 绩 表 
姓名 ”语文 ”数学 英语 ”物理 


期 中 考试 成 绩 表 
姓名 语文 数学 英语 物理 化 学 
李 1 94 89 B87 56 97 
孙 2 94 87 B84 86 87 
E182 84 87 86 


李 1 94 89 87 56 
了 9 87 4 86 
王 82 84 87 86 


图 7.4 没有 设置 表格 宽度 的 表格 效果 图 7.5 调整 浏览 器 宽度 后 的 表格 效果 


/ 
3 昌 如 果 将 表格 中 的 宽度 值 设置 为 国定 的 像素 数 ， 那 么 当 浏览 器 大 小 变化 时 ， 表 格 不 会 随 之 
发 生变 化 。 
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7.2.2 ”表格 的 高 度 一 一 height 


设置 表格 高 度 的 方法 与 设置 表格 宽度 的 方法 相同 ， 也 可 以 将 表格 的 高 度 设置 为 浏览 器 高 度 的 百 分 
比 或 者 是 固定 的 像素 数 。 

语法 

<table height=" 表 格 高 度 "> 

实例 代码 


<html> 
<head> 
<title> 设 置 表格 的 高 度 </title> 
</head> 
<body> 
< 上 -设置 表格 的 宽度 为 400、 高 度 为 400--> 
<table width="400" height="400"> 
<caption> 期 中 考试 成 绩 表 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 
<th> 英 语 </th> 
<th> 物 理 </th> 
<th> 化 学 </th> 
</tr> 
<tr> 
<td> 李 1</td> 
<td>94</td> 
<td>89</td> 
<td>87</td> 
<td>56</td> 
<td>97</td> 
</tr> 
<tr> 
<td> 孙 2</td> 
<td>94</td> 
<td>87</td> 
<td>84</td> 
<td>86</td> 
<td>87</td> 
</tr> 
<tr> 
<td> 王 1</td> 
<td>82</td> 
<td>84</td> 
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<td>87</td> 
<td>86</td> 
<td>77</td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 
度 都 保持 不 变 ， 如 图 7.6 所 示 。 


7.2.3 ”表格 的 对 齐 方 开 
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由 于 将 表格 高 度 设 为 了 固定 的 像素 数 ， 无 论 浏 览 器 如 何 变 化 ， 表 格 的 高 


文件 志 名 (5) 查看 (V) 收 训 交 A) 工具 (Tm 和 和 助 (H) 


期 中 考试 成 绩 表 


姓名 语文 数学 英语 物理 化 学 


图 7.6 设置 表格 的 高 度 


align 


表格 的 对 齐 方式 用 于 设置 整个 表格 在 网 页 中 的 位 置 。 


语法 


<table align=" 表 格 对 齐 方 式 "> 


语法 解释 


align 参数 可 以 取 值 为 left( 左 对 齐 ) 、center( 居 中 ) 或 者 right ( 右 对 齐 ) 。 


实例 代码 
<html> 
<head> 


<title> 设 置 表 格 对 齐 方式 </title> 


</head> 
<body> 


<table align="center" width="600"> 
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<caption> 明 日 公司 员工 通讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮 件 </th> 
</tr> 
<tr> 

<td> 李 小 米 </td> 
<td> 长 春 市 天 富家 园 </td> 
<td>1556705****</td> 
<td>1556705***@qq.com</td> 
</tr> 
<tr> 
<td> 刘 笑 笑 </td> 
<td> 长 春 市 明珠 </td> 
<td>1556705****</td> 
<td>1556705***@qq.com</td> 
</tr> 

</table> 

</body> 

</html> 


运行 这 段 代码 ， 可 以 看 到 表格 的 内 容 居 中 显示 ， 如 图 7.7 所 示 。 


Ba ow ocx| 
明 


内 名 地 址 
李 小 米 。 长 春 市 天 富家 图 
齐 笑 尖 。 长 春 市 明珠 


图 7.7 设置 表格 的 对 齐 方式 
7.3 设置 表格 的 边框 


名 教学 录像 : 光盘 \TIM\IxX\ 八 设置 表格 的 边框 .exe 


对 于 表格 除了 可 以 设置 基本 属性 外 ， 还 可 以 设置 边框 效果 ， 包 括 颜色 、 宽 度 等 。 


7.3.1 表格 边框 的 宽度 一 一 border 


默认 情况 下 ,表格 是 不 显示 边框 的 。 为 了 使 表格 更 加 清晰 ， 可 以 使 用 


语法 
<table border=" 边 框 宽度 "> 


border 参数 设置 边框 的 宽度 。 
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语法 解释 
只 有 设 定 了 border 参数 ， 且 其 值 不 为 0， 在 网 页 中 才能 显示 出 表格 的 边框 。border 的 单位 为 像素 。 
实例 代码 


<html> 

<head> 

<title> 设 置 表 格 边框 </title> 

</head> 

<body> 

<table align="center" width="600" border="1"> 

<caption> 明 日 公司 员工 通讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮 件 </th> 
</tr> 
<tr> 

<td> 李 小 米 </td> 
<td> 长 春 市 天 富家 园 </td> 
<td>1556705****</td> 
<td>1556705***@qq.com</td> 
</tr> 
<tr> 
<td> 刘 笑 笑 </td> 
<td> 长 春 市 明珠 </td> 
<td>1556705****</td> 
<td>1556705***@qq.com</td> 
</tr> 

</table> 

</body> 

</html> 


运行 这 段 程序 ， 表格 的 边框 宽度 为 1 像素 ,效果 如 图 7.8 所 示 。 由 于 第 一 行 “ 明 日 员工 通讯 录 ” 为 
表格 的 标题 ， 因 此 其 周围 并 没有 边框 。 


用 日 公司 全 工 通 汛 录 


赴 名 地 让 
天 中 来 站 市 天 高 家 因 
长 闪 市 晴 坏 


图 7.8 设置 表格 的 边框 
7.3.2 ”表格 边框 的 颜色 一 一 bordercolor 


默认 情况 下 ， 表 格 边框 的 颜色 是 灰色 的 ， 为 了 使 表格 看 起 来 更 加 鲜明 ， 可 以 使 用 bordercolor 参数 
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设置 不 同 的 表格 边框 颜色 。 但 是 设置 边框 颜色 的 前 提 是 边框 宽 


语法 
<table border=" 边 框 宽度 " bordercolor=" 边 框 颜色 " 


语法 解释 


例 7.1 


<html> 

<head> 

<title> 设 置 表 格 边框 颜色 </title> 
</head> 


<body> 
<table align="center" width="600" border="1" bordercolor="#0099FF"> 
<caption> 明 日 公司 员工 通讯 录 </caption> 


<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮 件 </th> 
</tr> 
<tr> 
<td> 李 小 米 </td> 
<td> 长 春 市 天 富家 园 </td> 
<td>1556705****</td> 
<td>1556705****@qq.com</td> 
</tr> 
<tr> 
<td> 刘 笑 笑 </td> 
<td> 长 春 市 明珠 </td> 
<td>1556705****</td> 
<td>1556705***@qq.com</td> 
</tr> 


</table> 
</body> 
</html> 


运行 这 段 代码 ， 看 到 表格 的 边框 颜色 发 生 了 变化 ， 如 图 7.9 所 示 。 
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在 该 语法 中 ， 边 框 宽度 不 能 为 0， 边 框 颜 色 为 十 六 进 制 数 的 颜色 代码 。 
实例 代码 (实例 位 置 ， 光盘 \TMNsIN7\1) 


© ET Er 由 一 


文件 人) 多 生日 二 看 MV 


本 穴内 工具 (种 屿 (H) 


明日 公司 员工 通讯 录 


姓名 


地 址 [ 电话 | 电子 最 件 


| 李 小 米 “| 长 春 市 天 富家 园 |1556705**** ||1s56705****@qq.com 


刘 笑 笑 | 长 春 市 明珠 |1556705**** ||1556705****@qq com 


图 7.9 设置 表格 边框 颜色 


度 不 能 为 0, 否则 无 法 显示 出 应 有 的 效果 。 
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7.3.3 ”表格 内 框 的 宽度 一 cellspacing 


表格 的 内 框 宽度 是 指 表格 内 部 各 个 单元 格 之 间 的 宽度 。 
语法 

<table cellspacing=" 内 框 宽度 " > 

语法 解释 


内 框 宽度 的 单位 为 像素 。 
例 7.2 实例 代码 (实例 位 置 ， 光盘 \TMNsN7\2) 


<html> 
<head> 
<title> 设 置 表格 内 框 宽度 </title> 
</head> 
<body> 
<table align="center" width="600" cellspacing="10" border="1"> 
<caption> 明 日 公司 员工 通讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮 件 </th> 
</tr> 
<tr> 
<td> 李 小 米 </td> 
<td> 长 春 市 天 富家 园 </td> 
<td>1556705****</td> 
<td>1556705****@qq.com</td> 
</tr> 
<tr> 
<td> 刘 笑 笑 </td> 
<td> 长 春 市 明珠 </td> 
<td>1556705****</td> 
<td>1556705****@qq.com</td> 


图 7.10 设置 内 框 宽度 
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7.3.4 ”表格 内 文字 与 边框 的 间距 一 一 cellpadding 


默认 情况 下 ， 表 格 内 的 文字 会 紧 贴 着 表格 的 边框 ， 这 样 看 上 去 非常 拥挤 。 可 以 使 用 cellpadding 参 
数 来 调整 这 一 距离 。 


语法 
<table cellpadding =" 文 字 与 边框 的 距离 " > 
语法 解释 


文字 与 边框 的 距离 以 像素 为 单位 ， 一 般 可 以 根据 需要 设置 ， 但 要 注意 不 能 过 大 。 因 为 这 个 值 不 只 
对 左右 边框 有 效 ， 同 时 对 上 下 边框 也 有 效 。 
例 7.3 实例 代码 (实例 位 置 ， 光盘 \TMNsN73) 


<html> 
<head> 
<title> 设 置 表 格 内 文字 与 边框 的 间距 </title> 
</head> 
<body> 
<table align="center" border="1" bordercolor="#FF6633"width="600" cellspacing="3" cellpadding="10"> 
<caption> 明 日 公司 员工 通讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮 件 </th> 
</tr> 
<tr> 
<td> 李 小 米 </td> 
<td> 长 春 市 天 富家 园 </td> 
<td>1556705****</td> 
<td>1556705****@qq.com</td> 
</tr> 
<tr> 
<td> 刘 笑 笑 </td> 
<td> 长 春 市 明珠 </td> 
<td>1556705****</td> 
<td>1556705***@qq.com</td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 7.11 所 示 。 


131 


HTML 5 从 入 门 到 精通 


地 小 米 | 卡 容 市 天 富家 园 


刘 S 舌 上午 市 明 忒 


图 7.11 设置 文字 与 边框 的 距离 
7.4 设置 表格 背景 


如 1 教学 录像 ， 光盘 \TMINDx\T\ 设 置 表格 背景 .exe 
为 了 突显 表格 ， 还 可 以 为 表格 设置 与 页 面 不 同 的 背景 。 


7.4.1 表格 背景 的 颜色 一 一 bgcolor 


设置 表格 背景 ， 最 简单 的 方法 就 是 给 表格 设置 背景 颜色 。 
语法 

<table bgcolor=" 颜 色 代码 "> 

例 7.4 实例 代码 (实例 位 置 ， 光盘 \TMNsIM7M4) 


<html> 
<head> 
<title> 设 置 表格 背景 颜色 </title> 
</head> 
<body> 
<table bgcolor="#FFCC66"align="center"” border="1" bordercolor="#FF6633"width="600" cellspacing="3" 
cellpadding="10"> 
<caption> 明 日 公司 员工 通讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮件 </th> 
</tr> 
<tr> 
<td> 李 小 米 </td> 
<td> 长 春 市 天 富家 园 </td> 
<td>1556705****</td> 
<td>1556705***@qq.com</td> 
</tr> 
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<tr> 
<td> 刘 笑 笑 </td> 
<td> 长 春 市 明珠 </td> 
<td>1556705****</td> 
<td>1556705***@qq.com</td> 
</tr> 

</table> 

</body> 

</html> 


运行 这 段 代码 ， 可 以 看 到 给 表格 设置 了 桶 黄色 的 背景 ， 如 图 7.12 所 示 。 


ED wn pox] 
文 作 人 二 三 日 ” 豆 看 [V) 收 吉 (A) 工 (T) 大 Ro(H) 
明日 公司 员工 通讯 录 


图 7.12 设置 表格 背景 
7.4.2 ”表格 的 背景 图 像 一 一 background 


除了 背景 颜色 之 外 ， 还 可 以 为 表格 设置 背景 图 像 ， 让 表格 看 上 去 更 加 绚丽 多 彩 。 
语法 

<table background= "背景 图 像 的 地 址 "> 

语法 解释 


背景 图 像 的 地 址 可 以 设置 为 相对 地 址 ， 也 可 以 设置 为 绝对 地 址 。 
例 7.5 实例 代码 (实例 位 置 ， 光盘 \TMNsIM\S) 


<html> 
<head> 
<title> 设 置 表 格 背 景 图 像 </title> 
</head> 
<body> 
<table background="images/1.png"align="center" border="1"” bordercolor="#FF6633" width="600" 
cellspacing="3" cellpadding="10"> 
<caption> 明 日 公司 员工 通讯 录 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 
<th> 电 子 邮 件 </th> 
</tr> 
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<tr> 

<td> 李 小 米 </td> 
<td> 长 春 市 天 富家 园 </td> 
<td>1556705****</td> 
<td>1556705***@qq.com</td> 
</tr> 
<tr> 
<td> 刘 笑 笑 </td> 
<td> 长 春 市 明珠 </td> 
<td>1556705**</td> 
<td>1556705****@qq.com</td> 
</tr> 

</table> 

</body> 

</html> 


运行 这 段 代码 ， 可 以 看 到 表格 的 背景 图 像 如 图 7.13 所 示 。 


CE meow sn P- cxj Summnane ~ 
HN WE) EVN) CuIN 工 RD Ro(H) 
明日 公司 员工 通讯 录 


姓名 地 址 电话 电子 邮件 
地 | 米 Ke 1556705+***@qq com 
和 珠 | 1556705+***@qq com 
一 一 


图 7.13 设置 表格 的 背景 图 像 
7.5 设置 表格 的 行 属性 


贸 ml 教学 录像 : 光盘 \TMNIT\ 设 置 表格 的 行 属性 .exe 
设 定 了 表格 的 整体 属性 后 ， 还 可 以 对 单独 的 一 行 表格 进行 属性 设置 。 


7.5.1 高 度 的 控制 一 一 height 


在 网 页 中 常常 遇 到 一 些 表 格 中 某 一 行 高 度 和 其 他 行 不 同 的 情况 ， 这 时 就 需要 使 用 height 参数 进行 
相应 设置 。 


语法 

<tr height=" 表 格 中 某 行 高 度 "> 

语法 解释 

这 一 参数 只 对 设置 的 这 一 行 有 效 。 
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例 7.6 实例 代码 (实例 位 置 : 光盘 \TM\sI\7\6) 


<html> 
<head> 
<title> 设 置 行 高 度 </title> 
</head> 
<body> 
<table border="1" bordercolor="#FF0000" cellpadding="5"> 
<caption> 我 国 著名 诗人 一 一 李白 </caption> 
<tr height="100"> 
<td> 诗 名 </td> 
<td> 登 金陵 凤凰 台 </td> 
</tr> 
<tr> 
<td> 内 容 </td> 
<td> 
凤凰 台 上 凤凰 游 ， 凤 去 台 空 江 自 流 。 
吴 宫 花草 埋 幽 径 ， 晋 代 衣冠 成 古 丘 。 
三 山 半 落 青山 外 ， 二 水 中 分 白鹭 洲 。 
总 为 浮云 能 蔽 日 ， 长 安 不 见 使 人 愁 。 
</td> 
</tr> 
</table> 
</body> 
</html> 


运行 代码 ， 效 果 如 图 7.14 所 示 ， 可 以 看 出 ， 第 一 行 设置 了 100 像素 的 高 度 ， 第 2 行 没有 设置 高 度 
值 ， 是 表格 的 默认 高 度 。 


pp i ee 
eS rT Er 


| ET- OECD 


我 国 车 名 诗人 一 李白 


图 7.14 设置 行 高 度 
7.5.2 行 的 边框 颜色 一 一 bordercolor 


与 表格 相同 ， 对 表格 的 行 来 说 ， 也 可 以 单独 设置 其 外 框 颜色 ， 以 突出 显示 表格 中 的 某 一 行 。 
语法 

<tr bordercolor=" 颜 色 代码 "> 

例 7.7 实例 代码 (实例 位 置 ， 光盘 \TMNsIN7\7) 
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<html> 
<head> 
<title> 设 置 行 的 边框 颜色 </title> 
</head> 
<body> 
<table width="500" border="1" bordercolor="#0000FF"> 
<caption> 某 公司 员工 工资 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 基 本 工资 </th> 
<th> 岗 位 工资 </th> 
<th> 绩 效 工 资 </th> 
<th> 工 龄 工资 </th> 
</tr> 
<tr bordercolor="#FF0000" > 
<td> 李 1</td> 
<td>1000</td> 
<td>600</td> 
<td>800</td> 
<td>400</td> 
</tr> 
<tr> 
<td> 王 2</td> 
<td>800</td> 
<td>600</td> 
<td>800</td> 
<td>200</td> 
</tr> 
</table> 
</body> 
</html> 


运行 代码 ， 效 果 如 图 7.15 所 示 。 其 中 第 二 行 的 表格 边框 颜色 是 单独 设置 的 ， 与 整个 表格 不 同 。 


某 公 司 员工 工资 
姓名 | 基本 工资 | 岗位 T 资 | 绩效 I 资 | 工龄 工资 
医 1 |]1000 1600 500 fH00 
EE2 jsoo 600 [800 Poo 


图 7.15 设置 行 的 边框 颜色 
7.5.3 行 的 背景 颜色 一 一 bgcolor 


与 设置 行 的 边框 颜色 相同 ， 行 的 背景 色 也 可 以 单独 设置 。 
语法 
<tr bgcolor=" 颜 色 代 码 "> 
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例 7.8 实例 代码 〈 实 例 位 置 : 光盘 \TMNsIM7\8) 


<html> 
<head> 
<title> 设 置 行 的 背景 颜色 </title> 
</head> 
<body> 
<table width="500" border="1" bordercolor="#0000FF"> 
<caption> 某 公司 员工 工资 </caption> 
<tr bgcolor="#33FFFF"> 
<th> 姓 名 </th> 
<th> 基 本 工资 </th> 
<th> 岗 位 工资 </th> 
<th> 绩 效 工资 </th> 
<th> 工 龄 工资 </th> 
</tr> 
<tr bordercolor="#FF0000" > 
<td> 李 1</td> 
<td>1000</td> 
<td>600</td> 
<td>800</td> 
<td>400</td> 
</tr> 
<tr> 
<td> 王 2</td> 
<td>800</td> 
<td>600</td> 
<td>800</td> 
<td>200</td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 ， 已 经 为 表格 的 第 一 行 设置 了 单独 的 背景 色 ， 如 图 7.16 所 示 。 


图 7.16 设置 行 的 背景 色 


7.5.4 行文 字 的 水 平 对 齐 方式 


align 


表格 中 也 可 以 为 单独 的 一 行 设 置 特殊 水 平 对 齐 方式 。 
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<tr align=" 水 平 对 齐 方 式 "> 


语法 解释 


这 里 水 平 对 齐 方式 包含 3 种 ， 分 别 为 left、center 和 right。 
例 7.9 实例 代码 〈 实 例 位 置 ; 光盘 \TMINsN7\9) 


<html> 
<head> 


<title> 设 置 行 的 水 平 对 齐 </title> 


</head> 
<body> 


<table width="500" border="1" bordercolor="#0000FF"> 
<caption> 某 公司 员工 工资 </caption> 
<tr bgcolor="#33FFFF"> 


<th> 姓 名 </th> 

<th> 基 本 工资 </th> 
<th> 岗 位 工资 </th> 
<th> 绩 效 工资 </th> 
<th> 工 龄 工资 </th> 


</tr> 


<tr 


align="left"bordercolor="#FF0000" > 
<td> 李 1</td> 

<td>1000</td> 

<td>600</td> 

<td>800</td> 

<td>400</td> 


</tr> 
<tr align="right"> 


<td > 王 2</td> 
<td>800</td> 
<td>600</td> 
<td>800</td> 
<td>200</td> 


</tr> 


</table> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 7.17 所 示 ， 第 二 行 的 水 平 对 齐 方 式 为 左 对 


Bde omvv-ahml Pp- cx| San 


齐 ， 第 三 行为 右 对齐 。 


图 7.17 设置 行 的 水 平 对 齐 方式 
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7.5.5 “行文 字 的 垂直 对 齐 方式 


valign 


在 表格 中 也 可 以 为 单独 的 一 行 设置 特殊 垂直 对 齐 方式 。 
语法 

<tr valign=" 垂 直 对 齐 方式 "> 

语法 解释 


这 里 垂直 对 齐 方式 分 别 为 top〈 靠 上 ) 、middle 〈 居 中) 和 bottom ( 靠 下 ) 3 种 。 
例 7.10 ”实例 代码 〈 实 例 位 置 ， 光盘 \TMNsIN7\10) 


<html> 
<head> 
<title> 设 置 行 的 垂直 对 齐 方式 </title> 
</head> 
<body> 
<table border="1" bordercolor="#FF0000" cellpadding="5"> 
<caption> 我 国 著名 诗人 一 一 李白 </caption> 
<tr height="100" valign="top"> 
<td> 诗 名 </td> 
<td> 登 金陵 凤凰 台 </td> 
</tr> 
<tr> 
<td> 内 容 </td> 
<td height="100" valign="bottom"> 
凤凰 台 上 凤凰 游 ， 凤 去 台 空 江 自流 。 
吴 宫 花草 埋 幽 径 ， 晋 代 衣冠 成 古 丘 。 
三 山 半 落 青 山 外 ， 二 水 中 分 白鹭 洲 。 
总 为 浮云 能 项 日 ， 长 安 不 见 使 人 愁 。 


图 7.18 设置 行文 字 的 垂直 对 齐 效 果 
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7.5.6 ”表格 标题 的 垂直 对 齐 方式 


align 


表格 标题 是 一 种 特殊 的 行 ， 这 种 行 没有 边框 ， 但 是 依然 可 以 设置 对 齐 方式 ， 包 括 水 平 对 齐 方式 和 
垂直 对 齐 方式 。 其 水 平 对 齐 方式 的 设置 与 其 他 行 设 置 相 同 ， 也 是 使 用 align 参数 来 设置 ， 这 里 不 再 重复 
说 明 ; 垂直 对 齐 方式 虽然 同样 使 用 align 参数 来 设置 ， 但 与 其 他 行 不 同 的 是 ， 标 题 的 垂直 对 齐 方式 是 指 
标题 位 于 表格 的 上 方 或 下 方 。 

语法 

<caption align=" 垂 直 对 齐 方式 "> 表格 的 标题 </caption> 

语法 解释 

这 里 垂直 对 齐 方式 的 值 可 以 取 top 或 者 bottom。 取 值 为 ttp， 是 将 标题 文字 设置 在 表格 的 上 方 ; 取 


值 为 bottom， 是 将 标题 文字 设置 在 表格 的 下 方 。 
例 7.11 实例 代码 〈 实 例 位 置 ， 光 盘 \TMNsI7\11) 


<html> 
<head> 
<title> 设 置 表格 标题 的 垂直 对 齐 方式 </title> 
</head> 
<body> 
<table width="500" border="1" bordercolor="#0000FF"> 
<caption align="bottom"> 某 公司 员工 工资 </caption> 
<tr bgcolor="#33FFFF"> 
<th> 姓 名 </th> 
<th> 基 本 工资 </th> 
<th> 岗 位 工资 </th> 
<th> 绩 效 工资 </th> 
<th> 工 龄 工资 </th> 
</tr> 
<tr align="left" bordercolor="#FF0000" > 
<td> 李 1</td> 
<td>1000</td> 
<td>600</td> 
<td>800</td> 
<td>400</td> 
</tr> 
<tr> 
<td> 王 2</td> 
<td>800</td> 
<td>600</td> 
<td>800</td> 
<td>200</td> 
</tr> 
</table> 
</body> 
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</html> 


运行 这 段 代码 ， 效 果 如 图 7.19 所 示 。 


图 719 设置 表 格 标 是 的 和 站 对 削 廊 式 
7.6 调整 单元 格 属性 


区 1 教学 录像 : 光盘 VTMNIX\7\ 调 整 单元 格 属 性 .exe 
表格 中 另外 一 个 元 素 就 是 单元 格 ， 单 元 格 的 属性 标记 和 行 标记 非常 相似 。 


7.6.1 单元 格 大 小 一 一 width、height 


默认 情况 下 ， 单 元 格 的 大 小 会 根据 内 容 自 动 调整 ， 也 可 以 进行 手动 调整 。 
语法 

<td width=" 单 元 格 宽度 " height=" 单 元 格 高 度 "> 

语法 解释 


单元 格 宽度 和 高 度 的 单位 是 像素 ， 而 对 一 个 单元 格 的 设置 往往 会 影响 到 多 个 单元 格 。 例 如 ， 


了 第 1 行 的 第 1 个 单元 格 的 宽度 ， 其 他 行 的 第 1 个 单元 格 宽度 往往 也 会 发 生变 化 。 
例 7.12 实例 代码 (实例 位 置 ， 光盘 \TMIsI\V7\12) 


<html> 
<head> 
<title> 设 置 单元 格 大 小 </title> 
</head> 
<body> 
<table border="1" bordercolor="#0000FF"> 
<caption> 某 电器 商 的 销售 情况 </caption> 
<tr bgcolor="#33FFFF"> 
<td width="60" height="50"> 销 售 对 象 </td> 
<td width="150"> 类 别 </td> 
<td> 产 品 型 号 </td> 
<td> 数 量 </td> 
<td> 单 价 </td> 
</tr> 


设置 
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<tr> 
<td height="40"> 单 位 </td> 
<td> 台 式 电脑 </td> 
<td width="100">mm260</td> 
<td>6</td> 
<td>2500</td> 
</tr> 
<tr> 
<td> 个 人 </td> 
<td width="100" height="40"> 笔 记 本 电脑 </td> 
<td>kkk445</td> 
<td>2</td> 
<td>6000</td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 7.20 所 示 。 


上 EGG 


某 电器 商 的 销售 情况 


台式 电脑 mm260 


| 笔记 本 电脑 [kkk445 


7.20 ”设置 单元 格 大 小 


7.6.2 ”单元 格 水 平 跨度 一 一 colspan 


单元 格 水 平 跨度 是 指 在 复杂 的 表格 结构 中 ， 有 些 单元 格 是 跨 多 个 列 的 。 
语法 

<td colspan=" 跨 的 列 数 "> 

语法 解释 

在 这 里 跨 的 列 数 就 是 这 个 单元 格 所 跨 列 的 个 数 。 

例 7.13 ”实例 代码 〈 实 例 位 置 : 光盘 \TMNsI\7\13) 


<html> 

<head> 

<title> 设 置 单元 格 列 跨度 </title> 
</head> 

<body> 


142 


第 7 章 表格 的 应 用 


<table width="550" border="1" bgcolor="#00FFFF" cellspacing="0" cellpadding="5"> 

<tr> 

<td colspan="3" align="center"> 古 诗 介绍 </td> 

</tr> 

<tr align="center"> 
<td> 作 者 </td> 
<td> 诗 名 </td> 
<td> 具 体内 容 </td> 

</tr> 

<tr align="center"> 
<td> 王 维 </td> 
<td> 积 雨 辆 川 计 作 </td> 
<td> 
积 雨 空 林 烟 火 迟 ， 燕 蒙 炊 系 饥 东 灾 。 
汉江 水 田 飞 白 获 ， 阴 阴 夏 木 典 黄 酮 。 
山中 习 静 观 朝 树 ， 松 下 清高 折 露 茯 。 
野 老 与 人 争 席 罢 ， 海 鸥 何事 更 相 疑 ? 
</td> 

</tr> 

</table> 
</body> 
</html> 


运行 这 段 代码 ， 得 到 如 图 7.21 所 示 的 “古诗 介绍 ”单元 格 跨 3 列 的 显示 效果 。 


~ 
3 Eom- ohm -cx| 三 REe 元 FS x 站 


图 7.21 设置 单元 格 列 跨度 
7.6.3 ”单元 格 垂直 跨度 一 一 rowspan 


单元 格 除了 可 以 在 水 平方 向 上 跨 列 ， 还 可 在 垂直 方向 上 跨行 。 跨 行 设置 需要 使 用 rowspan 参数 。 
语法 

<td rowspan=" 单 元 格 跨行 数 "> 

语法 解释 


与 水 平 跨度 相对 应 ，rowspan 设置 的 是 单元 格 在 垂直 方向 上 跨行 的 个 数 。 
例 7.14 实例 代码 〈 实 例 位 置 : 光盘 \TMNsI\7\14) 


<html> 
<head> 


143 


HTML 5 从 入 门 到 精通 


<title> 设 置 单元 格 行 跨度 </title> 
</head> 
<body> 
<table border="1" bordercolor="#00CCFF" cellspacing="0" cellpadding="5"> 
<caption> 某 网 上 书店 销售 分 类 </caption> 
<tr bgcolor="#CC99FF"> 
<td width="130"> 类 别 </td> 
<td width="290"> 子 类 别 </td> 
</tr> 
<tr> 
<td rowspan="3"> 电 脑 书籍 </td> 
<td> 编 程 类 </td> 
</tr> 
<tr> 
<td> 图 形 图 像 类 </td> 
</tr> 
<tr> 
<td> 数 据 库 类 </td> 
</tr> 
<tr> 
<td rowspan="2"> 考 试 专区 </td> 
<td> 中 考 高 考 </td> 
</tr> 
<tr> 
<td> 考 研 类 </td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 7.22 所 示 。 


(Se 


鞭 网 上 书店 销售 分 类 


图 7.22 设置 单元 格 的 行 跨度 
7.6.4 ”单元 格 对 齐 方式 一 一 align、valign 


设置 单元 格 的 对 齐 方 式 与 设置 行 的 对 齐 方式 方法 相似 。 
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语法 

<td align=" 水 平 对 齐 方式 " valign=" 垂 直 对 齐 方式 "> 

语法 解释 

在 该 语法 中 ， 水 平 对 齐 方式 的 取 值 可 以 是 left、center 或 right; 垂直 对 齐 方 式 的 取 值 可 以 是 top、 
middle 或 bottom 。 


实例 代码 


<html> 
<head> 
<title> 设 置 单元 格 对 齐 方式 </title> 
</head> 
<body> 
<table border="1" bordercolor="#0000FF"> 
<caption> 某 电器 商 的 销售 情况 </caption> 
<tr bgcolor="#33FFFF"> 
<td align="center' width="70" height="50"> 销 售 对 象 </td> 
<td valign="bottom" align="center" width="150"> 类 别 </td> 
<td align="left" valign="top"> 产 品 型 号 </td> 
<td> 数 量 </td> 
<td> 单 价 </td> 
</tr> 
<tr> 
<td height="40"> 单 位 </td> 
<td> 台 式 电脑 </td> 
<td width="100">mm260</td> 
<td>6</td> 
<td>2500</td> 
</tr> 
<tr> 
<td> 个 人 </td> 
<td width="100" height="40"> 笔 记 本 电脑 </td> 
<td>kkk445</td> 
<td>2</td> 
<td>6000</td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 程序 ， 效 果 如 图 7.23 所 示 ， 图 中 对 不 同 单元 格 的 对 齐 方 式 进行 了 不 同 的 设置 ， 效 果 也 不 
相同 。 
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Sa 司 Wsers\h\Deskt P - G x | 全 ia 
EN WE) SN IH) 


某 电器 商 的 销售 情况 


单位 台式 电脑 


lm260 6 |2500| 


个 人 笔记 本 电脑 ekg45 2 jsooal 


7.23 ”设置 单元 格 对 齐 方式 


7.6.5 ”单元 格 的 背景 色 


为 了 使 表格 看 起 来 更 加 绚丽 多 彩 ， 可 以 为 不 同 的 单元 格 分 别 设置 不 同 的 背景 颜色 。 
语法 

<td bgcolor=" 颜 色 代 码 "> 

例 7.15 实例 代码 (实例 位 置 ， 光盘 \TMNsI\7\1S) 


<html> 
<head> 
<title> 设 置 单 元 格 背景 颜色 </title> 
</head> 
<body> 
<table border="1" cellspacing="0" cellpadding="5" width="400" height="100"> 
<caption> 期 中 考试 成 绩 表 </caption> 
<tr align="center"> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 
<th> 英 语 </th> 
<th> 物 理 </th> 
<th> 化 学 </th> 
</tr> 
<tr> 
<td> 李 1</td> 
<td>94</td> 
<td>89</td> 
<td>87</td> 
<td bgcolor="#FFCC00">56</td> 
<td>97</td> 
</tr> 
<tr> 
<td> 孙 2</td> 
<td>94</td> 
<td>87</td> 
<td bgcolor="#66FFCC">84</td> 
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<td>86</td> 
<td>87</td> 
</tr> 
<tr> 
<td> 王 1</td> 
<td bgcolor="#CC9999">82</td> 
<td bgcolor="#FF66FF">84</td> 
<td>87</td> 
<td>86</td> 
<td bgcolor="#FF3399">77</td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 每 科 的 最 低 分 数 已 经 被 设置 了 不 同 的 背景 颜色 ， 如 图 7.24 所 示 。 


RE wv Pp-ox|Ganeinisme ~ 


期 中 考试 成 绩 表 


7.24 设置 单元 格 的 背景 色 


7.6.6 单元 格 的 边框 颜色 一 一 bordercolor 


单元 格 的 边框 颜色 可 以 通过 bordercolor 参数 单独 设置 。 
语法 

<td bordercolor=" 颜 色 代码 "> 

例 7.16 实例 代码 (实例 位 置 ， 光盘 \TM\sI\N\16) 


<html> 
<head> 
<title> 设 置 单元 格 边框 颜色 </title> 
</head> 
<body> 
<table border="2" bordercolor="#99CCFF" cellspacing="5" cellpadding="5" width="400" height="100"> 
<caption> 期 中 考试 成 绩 表 </caption> 
<tr align="center"> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 
<th> 英 语 </th> 
<th> 物 理 </th> 
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<th> 化 学 </th> 

</tr> 

<tr> 
<td> 李 1</td> 
<td>94</td> 
<td>89</td> 
<td>87</td> 
<td bordercolor="#FFOOFF">56</td> 
<td>97</td> 

</tr> 

<tr> 
<td> 孙 2</td> 
<td>94</td> 
<td>87</td> 
<td bordercolor="#00FF00">84</td> 
<td>86</td> 
<td>87</td> 

</tr> 

<tr> 
<td> 王 1</td> 
<td bordercolor="#FF3366">82</td> 
<td bordercolor="#0000FF">84</td> 
<td>87</td> 
<td>86</td> 
<td bordercolor="#003399">77</td> 

</tr> 

</table> 
</body> 
</html> 


运行 这 段 代 码 ， 就 会 发 现 分 数 低 的 单元 格 边框 被 设置 了 不 同 的 颜色 ， 如 图 7.25 所 示 。 


一 a- 
NS ow -hnl 2- ox| Buses 


期 中 考试 成 线 表 


7.25 ”设置 单元 格 边框 颜色 


7.6.7 ”单元 格 的 亮 边框 一 一 bordercolorlight 


单元 格 的 亮 边框 就 是 单元 格 边框 向 光 的 部 分 。 通 过 bordercolorlight 参数 可 以 单独 定义 单元 格 亮 边 
框 的 颜色 。 
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<td bordercolorlight=" 颜 色 代 码 "> 


例 7.17 实例 代码 (实例 位 置 ， 光盘 \TMIsI\7\17) 


<html> 
<head> 


<title> 设 置 单 元 格 的 亮 边框 颜色 </title> 


</head> 
<body> 


<table border="2" bordercolor="#99CCFF" cellspacing="5" width="400" height="100"> 


<caption> 期 中 考试 成 绩 表 </caption> 
<tr align="center"> 


<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 
<th> 英 语 </th> 
<th> 物 理 </th> 
<th> 化 学 </th> 


</tr> 


<tr> 


<td> 李 1</td> 

<td>94</td> 

<td>89</td> 

<td>87</td> 

<td bordercolorlight="#FF0000">56</td> 
<td>97</td> 


</tr> 


<tr> 


<td> 孙 2</td> 

<td>94</td> 

<td>87</td> 

<td bordercolorlight="#0000FF">84</td> 
<td>86</td> 

<td>87</td> 


</tr> 


<tr> 


<td> 王 1</td> 

<td bordercolorlight="#9900CC">82</td> 
<td bordercolorlight="#FFOOFF">84</td> 
<td>87</td> 

<td>86</td> 

<td bordercolorlight="#336633">77</td> 


</tr> 


</table> 
</body> 
</html> 


运行 这 段 代 码 ， 就 会 看 到 表格 


设置 了 亮 边框 的 效果 ， 


如 


图 7.26 所 示 。 
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后 DamrTL-Lhiml 中 - 0 X | 局 妈 本 单元 想 的 元 过 枉 _ 


图 7.26 设置 单元 格 的 亮 边框 


7.6.8 单元 格 的 暗 边框 一 一 bordercolordark 


单元 格 的 暗 边框 就 是 单元 格 边框 背光 的 部 分 。 通 过 bordercolordark 参数 可 以 单独 定义 单元 格 暗 边 
框 的 颜色 。 


语法 
<td bordercolordark=" 颜 色 代码 "> 
例 7.18 实例 代码 (实例 位 置 ， 光盘 \TMNsIN\18) 


<html> 
<head> 
<title> 设 置 单元 格 的 暗 边 框 颜色 </title> 
</head> 
<body> 
<table border="2" bordercolor="#99CCFF" cellspacing="5" width="400" height="100"> 
<caption> 期 中 考试 成 绩 表 </caption> 
<tr align="center"> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 
<th> 英 语 </th> 
<th> 物 理 </th> 
<th> 化 学 </th> 
</tr> 
<tr> 
<td> 李 1</td> 
<td>94</td> 
<td>89</td> 
<td>87</td> 
<td bordercolorlight="#FF0000" bordercolordark="#0066FF">56</td> 
<td>97</td> 
</tr> 
<tr> 
<td> 孙 2</td> 
<td>94</td> 
<td>87</td> 
<td bordercolorlight="#0000FF" bordercolordark="#CC9999">84</td> 
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<td>86</td> 
<td>87</td> 
</tr> 
<tr> 
<td> 王 1</td> 
<td bordercolorlight="#9900CC" bordercolordark="#FF3300">82</td> 
<td bordercolorlight="#FFOOFF" bordercolordark="#996699">84</td> 
<td>87</td> 
<td>86</td> 
<td bordercolorlight="#336633" bordercolordark="#CC99CC">77</td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 表格 中 设置 了 暗 边 框 的 效果 ， 如 图 7.27 所 示 。 


DE oY-Lhm Do Xx) sss ~ 
期 中 考试 成 绩 表 


7.27 设置 单元 格 的 暗 边框 


7.6.9 ”单元 格 的 背景 图 像 一 一 background 


与 表格 的 行 设置 不 同 的 是 ， 单 元 格 可 以 设置 背景 为 图 像 格 式 。 当 设置 了 单元 格 背 景 图 像 时 ， 网 页 


中 将 会 显示 出 图 片 的 效果 。 


语法 
<td background=" 背 景 图 片 的 地 址 "> 
语法 解释 


背景 图 片 的 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 。 
例 7.19 实例 代码 〈 实 例 位 置 ， 光盘 \TMNsIM7\19) 


<html> 
<head> 
<title> 设 置 单元 格 的 背景 图 片 </title> 
</head> 
<body> 
<table border="2" bordercolor="#99CCFF" cellspacing="5" width="400" height="100"> 
<caption> 期 中 考试 成 绩 表 </caption> 
<tr align="center"> 
<th> 姓 名 </th> 
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<th> 语 文 </th> 
<th> 数 学 </th> 
<th> 英 语 </th> 
<th> 物 理 </th> 
<th> 化 学 </th> 

</tr> 

<tr> 
<td> 李 1</td> 
<td>94</td> 
<td>89</td> 
<td>87</td> 
<td background="images/3.gif">56</td> 
<td>97</td> 

</tr> 

<tr> 
<td> 孙 2</td> 
<td>94</td> 
<td>87</td> 
<td>84</td> 
<td>86</td> 
<td>87</td> 

</tr> 

<tr> 
<td> 王 1</td> 
<td>82</td> 
<td>84</td> 
<td>87</td> 
<td>86</td> 
<td>77</td> 

</tr> 

</table> 
</body> 
</html> 


运行 这 段 代码 ， 效 果 如 图 7.28 所 示 。 


py oO ° 
eo Er EFT 


期 中 考试 成 绩 表 
姓名 ]| 语文 ][ 数学 ][ 英语 ][ 物理 |[ 人 学 
国 [7 
国 国 
国 [7 


图 7.28 设置 单元 格 的 背景 图 像 


7.7 表格 的 结构 
除了 表格 的 设计 标记 外 ， 还 有 一 些 标记 是 用 来 明确 表格 结构 的 。 通 过 对 结构 的 设置 而 分 别 对 表 首 、 


152 


第 7 章 表格 的 应 用 


表 主 体 以 及 表 尾 的 样式 进行 设置 。 这 些 都 通过 成 对 出 现 的 标记 设置 ， 应 用 到 表格 里 用 于 整体 规划 表格 


的 行列 属性 。 使 用 这 些 标 记 能 对 表格 的 一 行 或 多 行 单元 格 属性 进行 统一 修改 ， 从 而 省 却 了 逐一 修改 单 


元 格 属性 的 麻烦 。 


7.7.1 表格 的 表 头 标记 一 一 thead 


表 头 样式 的 开始 标记 是 <thead>， 结 束 标记 是 </thead>， 其 中 可 以 设置 背景 颜 
方式 、 文 字 的 垂直 对 齐 方式 等 。 


语法 


<thead bgcolor=" 颜 色 代码 " align=" 水 平 对 齐 方式 " valign=" 垂 直 对 齐 方式 "> 


</thead> 
语法 解释 


在 该 语法 中 ，bgcolor、align 和 valign 参数 的 取 值 范围 与 单元 格 中 的 设置 方法 相 


色 、 文 字 的 水 


FE 对 齐 


同 ，align 可 以 取 值 


left、center 或 right; valign 可 以 取 值 top、middle 或 bottom。 在 <thead> 标 记 内 还 可 以 包含 <td>、<th> 


和 <tr> 标 记 ， 而 一 个 表 元 素 中 只 能 有 一 个 <thead> 标 记 。 
例 7.20 实例 代码 (实例 位 置 ， 光盘 \TMIsI\7\20) 


<html> 

<head> 

<title> 设 置 表 头 的 样式 </title> 
</head> 

<body> 


<table align="center" border="1" bordercolor="#FFCC99" cellpadding="3" width="550" height="180"> 


<caption> 某 单位 物品 管理 表 </caption> 
<thead bgcolor="#FF0000" align="center" valign="middle"> 
<tr> 
<th> 物 品名 </th> 
<th> 类 型 </th> 
<th> 领 取 人 </th> 
<th> 领 取 人 所 属 部 门 </th> 
<th> 数 量 </th> 
</tr> 
</thead> 
<tr> 
<td> 圆 珠 笔 </td> 
<td> 文 具 </td> 
<td> 李 小 米 </td> 
<td>PHP</td> 
<td>1</td> 
</tr> 
<tr> 
<td> 鼠 标 </td> 
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<td> 电 脑 配件 </td> 
<td> 潘 小 东 </td> 
<td>ASP.NET</td> 
<td>1</td> 
</tr> 
<tr> 
<td> 打 印 纸 </td> 
<td> 办 公 耗 材 </td> 
<td> 刘 小 欣 </td> 
<td>JAVA</td> 
<td>30</td> 
</tr> 
</table> 
</body> 
</html> 


运行 这 段 代 码 ， 效 果 如 图 7.29 所 示 。 


[lB DMAppSe mim V2 PD " OX | BS sss x 疫 
文件 前” 篇 各 |E) 查看 V】 收藏 夫 (A) 工具 (T) 规 双 (H) 
某 单位 物品 管理 表 i 
EI EE 
圆珠笔 。 文具 地 J 米 PHP 1 
鼠标 电脑 配件 潘 小 东 ASPNET 1 
打印 纸 办 公 耗 村 剂 小 欣 JAVA 30 


图 7.29 设计 表 头 样式 


7.7.2 ”表格 的 表 主 体 标记 一 一 tbody 


与 表 头 样式 的 标记 功能 类 似 ， 表 主体 样式 用 来 统一 设计 表 主 体 部 分 的 样式 ， 标 记 为 <tbody>。 

语法 

<tbody bgcolor=" 颜 色 代 码 ” align=" 水 平 对 齐 方式 " valign=" 垂 直 对 齐 方式 "> 

</tbody> 

语法 解释 

在 该 语法 中 ，bgcolor、align 和 valign 参数 的 取 值 范围 与 <thead> 标 记 中 的 相同 。 一 个 表 元 素 中 只 能 
有 一 个 <tbody> 标 记 。 

例 7.21 实例 代码 (实例 位 置 ， 光盘 \TMNsI\7\21) 


<html> 
<head> 
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<title> 设 置 表 主 体 的 样式 </title> 
</head> 
<body> 
<table align="center" border="1" bordercolor="#FFCC99" cellpadding="3" width="550" height="180"> 
<caption> 某 单位 物品 管理 表 </caption> 
<thead bgcolor="#FF0000" align="center valign="middle"> 
<tr> 
<th> 物 品名 </th> 
<th> 类 型 </th> 
<th> 领 取 人 </th> 
<th> 领 取 人 所 属 部 门 </th> 
<th> 数 量 </th> 
</tr> 
</thead> 
<tbody bgcolor="#CC99CC" align="left" valign="bottom"> 
<tr> 
<td> 圆 珠 笔 </td> 
<td> 文 具 </td> 
<td> 李 小 米 </td> 
<td>PHP</td> 
<td>1</td> 
</tr> 
<tr> 
<td> 鼠 标 </td> 
<td> 电 脑 配件 </td> 
<td> 潘 小 东 </td> 
<td>ASP.NET</td> 
<td>1</td> 
</tr> 
<tr> 
<td> 打 印 纸 </td> 
<td> 办 公 耗 材 </td> 
<td> 刘 小 欣 </td> 
<td>JAVA</td> 
<td>30</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 


7.30 设置 表格 主体 的 样式 


7.7.3 ”表格 的 表 尾 标记 
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tfoot 


<tfoot bgcolor=" 颜 色 代码 " align=" 水 平 对 齐 方 式 " valign=" 垂 直 对 齐 方式 > 


语法 解释 


在 该 语法 中 ，bgcolor、align 和 valign 参数 的 取 值 范 围 与 <thead> 标 记 中 
有 一 个 <tfoot> 标 记 。 


例 7.22 实例 代码 实例 位 置 : 


<html> 

<head> 

<title> 设 置 表 尾 的 样式 </title> 
</head> 

<body> 


光盘 \TMNsI\M7\22) 


的 相同 。 一 个 表 元 素 


<table align="center" border="1" bordercolor="#FFCC99" cellpadding="3" width="550" height="180"> 
<caption> 某 单位 物品 管理 表 </caption> 
<thead bgcolor="#FF0000" align="center" valign="middle"> 


<tr> 
<th> 物 品名 </th> 
<th> 类 型 </th> 
<th> 领 取 人 </th> 


<th> 领 取 人 所 属 部 门 </th> 


<th> 数 量 </th> 
</tr> 
</thead> 
<tbody bgcolor="#CC99CC" 
<tr> 
<td> 圆 珠 笔 </td> 
<td> 文 具 </td> 
<td> 李 小 米 </td> 
<td>PHP</td> 
<td>1</td> 
</tr> 
<tr> 
<td> 鼠 标 </td> 
<td> 电 脑 配 件 </td> 
<td> 潘 小 东 </td> 
<td>ASP.NET</td> 
<td>1</td> 
</tr> 
<tr> 
<td> 打 印 纸 </td> 
<td> 办 公 耗 材 </td> 


align="left" valign="bottom"> 
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<td> 刘 小 欣 </td> 
<td>JAVA</td> 
<td>30</td> 
</tr> 
</tbody> 
<tfoot bgcolor="#00CCFF" align="right" valign="middle"> 
<tr> 
<td colspan="5"> 表 格 创建 日 期 : 2011-11-20</td> 


运行 这 段 代 码 ， 效 果 如 图 7.31 所 示 。 


图 7.31 设计 表 尾 样式 


7.8 ”表格 的 说 套 


在 页 面 中 ， 排 版 是 通过 表格 的 嵌 套 来 完成 的 。 即 一 个 表格 内 部 可 以 套 入 另 一 个 表格 。 一 般 情况 下 
需要 使 用 一 些 可 视 化 软件 来 实现 布局 ， 这 样 看 起 来 更 加 直观 ， 容 易 达 到 预期 的 目的 ， 也 可 以 直接 通过 
输入 代码 来 实现 。 下 面 举例 说 明 表 格 的 霸 套 。 

例 7.23 实例 代码 (实例 位 置 ， 光盘 \TMIsI\7\23) 


<html> 
<head> 
<title> 表 格 的 嵌 套 </title> 
</head> 
<body> 
<!-- 使 用 表格 的 嵌 套 功能 设计 网 页 的 版 式 --> 
<table width="560" height="300" border="1" cellspacing="0" align="center > 
<thead bgcolor="#66FFFF"> 
<tr height="70"> 
<td width="160"> 网 站 logo</td> 
<td width="400"> 网 站 banner</td> 
</tr> 
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</thead> 
<tbody> 
<tr valign="top" height="200"> 
<td width="160" align="center"> 
<table width="135" height="180" border="1" cellspacing="0" bgcolor="#FFCCFF"> 
<tr> 
<td> 页 面 导航 </td> 
</tr> 
<tr> 
<td> 页 面 导航 </td> 
</tr> 
<tr> 
<td> 页 面 导航 </td> 
</tr> 
<tr> 
<td> 页 面 导航 </td> 
</tr> 
<tr> 
<td> 页 面 导航 </td> 
</tr> 
</table> 
</td> 
<td width="400" height="200" background="images/1.png" > 
<table width="380" height="160" border="1" bordercolor="#CC9933" cellspacing="2" cellpadding 


="5"> 
<tr> 
<td> 网 站 板块 </td> 
<td> 网 站 板块 </td> 
</tr> 
<tr> 
<td> 网 站 板块 </td> 
<td> 网 站 板块 </td> 
</tr> 
</table> 
</td> 
</tr> 
</tbody> 
<tfoot bgcolor="#66FFFF"> 
<tr align="center"> 
<td height="30" colspan="2"><font color="#FF0000"> 版 权 信息 </font></td> 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 设计 的 网 页 版 式 如 图 7.32 所 示 。 
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[es Bas 


图 7.32 ”表格 的 霸 套 效果 
7.9 小 结 


表格 是 网 页 排版 的 灵魂 。 无 论 是 使 用 简单 的 HTML 语言 编辑 的 网 页 ， 还 是 具备 动态 网 站 功能 的 
ASP、JSP、PHP 网 页 ， 都 需要 借助 表格 进行 排版 。 浏 览 网 站 时 会 发 现 几乎 所 有 的 网 页 都 或 多 或 少 地 采 
了 表格 。 因 此 ， 也 可 以 说 ， 不 能 够 很 好 地 掌握 表格 的 应 用 ， 就 等 于 没有 学 好 网 页 制作 。 


7.10 习 题 


选择 题 
1. 如 果 一 个 表格 有 1 行 4 列 ， 表 格 的 总 宽度 为 699， 间 距 为 5s， 填充 为 0， 边框 为 3， 每 列 的 宽度 
相同 ， 那 么 应 将 单元 格 定制 为 多 少 像素 宽 (  ) 。 


A. 126 B. 136 C. 147 D. 167 
2. 要 使 表格 的 边框 不 显示 ， 应 设置 border 的 值 是 (  ) 。 
A. 1 B. 0 C. 2 D3 
3. 以 下 标记 中 ， 用 于 定义 一 个 单元 格 的 是 ) 。 
A. <td>&nbsp;</td> B. <tr>...</tr> 
C. <table>...</table> D. <caption>...</caption> 
4. 用 于 设置 表格 背景 颜色 的 属性 的 是 (  ) 。 
A. background B. bgcolor C. BorderColor D. backgroundColor 


5. 若 要 使 表格 的 行 高 为 16pt， 以 下 方法 中 ， 正 确 的 是 (  )。 
A. <table border=1 style="Ling-Height:16">...</table> 
B. <table border=] style="Ling-Height:16pt">...</table> 
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C. <table border=] LingHeight="16pt">...</table> 

D. <table border=] LingHeight="16pt">...</table> 
6. 设置 围绕 表格 的 边框 宽度 的 HTML 代 码 是 (  )。 

A. <table size=#> B. <table border=#> 

C. <table bordersize=#> D. <tableborder=#> 
7. HTML 代码 <table width=#or%> 表 示 (  )。 

A. 设置 表格 单元 格 之 间 空 间 的 大 小 

B. 设置 表格 单元 格 边 框 与 其 内 部 内 容 之 间 空 间 的 大 小 

C. 设置 表格 的 宽度 一 一 用 绝对 像素 值 或 文档 总 宽度 的 百分比 

D. 设置 表格 单元 格 的 水 平 对 齐 


判断 题 


8 粘贴 表格 时 ， 不 粘贴 表格 的 内 容 。( ) 
9. 在 网 页 中 ， 水 平方 向 可 以 并 排 多 个 独立 的 表格 。 (。 ) 


填空 题 
10. 表格 的 宽度 可 以 用 百分比 和 两 种 单位 来 设置 。 


世 
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层 标 记 一 一 div 


( 铝 教学 录像 : 33 分 钟 ) 


层 可 以 用 于 创建 动态 页 面 。 因 为 JavasScript 可 以 动态 地 定位 层 ， 所 以 层 可 以 在 
文档 中 实现 移动 或 跳跃 的 功能 。 它 是 HTML 与 JavaScript 的 组 合 ， 并 且 多 许 创 建 动 
态 HTML (DHTML)。 使 用 层 、JavaScript 和 样式 单 ， 可 以 在 一 个 页 面 上 创建 (用 
HTML)、 设 计 (用 CSS) 和 操作 (用 JavaScript) 元 素 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


MH 了 解 层 的 分 类 

| 掌握 <div> 标 签 

| 掌握 <div> 标 签 的 属性 

H 掌握 <span> 标 签 与 <div> 标 签 的 区 别 
H 掌握 <iframe> 标 签 

Wm 掌 查 <layer> 标 签 和 <ilayer> 标 签 
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8.1 层 


区 教学 录像 : 光盘 \TM\IX\8\ 层 .exe 

层 属于 网 页 中 的 块 级 元 素 ， 层 元 素 中 可 以 包含 所 有 其 他 的 HTML 代码 。 层 提供 了 一 种 分 块 控制 网 页 
内 容 的 方法 。 可 以 通过 改变 层 的 位 置 来 改变 层 中 内 容 在 网 页 中 的 相对 位 置 。 层 中 的 内 容 与 网 页 中 其 他 元 
素 内 容 不 同 之 处 是 ， 各 层 之 间 可 以 彼此 营 加 ， 各 层 在 Z 坐标 〈 垂 直 于 页 面 的 方向 上 ) 的 次 序 可 以 改变 。 


8.1.1 层 的 分 类 


在 Dreamweaver 中 ， 层 有 两 类 ， 即 CSS 层 与 Netscape 层 。 
CSS 层 : 使 用 div 与 span 标签 定位 页 面 内 容 。 
Netscape 层 : 使 用 layer 与 ilayer 标签 定位 页 面 内 容 。 


~/ 
ASG2 明 系统 默认 使 用 CSS 层 。 


在 Web 页 面 中 插入 层 时 ，Dreamweaver 将 这 些 层 的 HTML 标签 插入 到 代码 中 ,可 以 为 层 设置 4 种 
不 同 的 标签 :div、span、layer 和 ilayer。 其 中 div 和 span 是 最 常见 的 标签 ，Internet Explorer 4.0 和 Netscape 
Navigator 4.0 都 支持 使 用 div 和 span 标签 创建 的 层 。 只 有 Netscape Navigator 4.0 版 本 支持 使 用 layer 和 
ilayer 创建 的 层 (Netscape Navigator 浏览 器 的 后 续 版 本 停止 了 对 这 两 种 标签 的 支持 ) 。 这 些 浏览 器 的 早 
期 版 本 都 可 以 显示 层 的 内 容 ， 但 不 能 显示 其 位 置 。 


8.1.2 ”定义 数据 块 


创建 层 的 首要 工作 是 定义 认为 是 同一 层 的 数据 块 。 对 于 一 个 普通 的 应 用 程序 ， 一 个 浏览 器 窗口 可 
能 被 认为 是 第 一 层 。 当 在 一 个 菜单 上 单 击 链接 时 ， 菜 单 本 身 会 显示 在 窗口 之 上 一 一 这 样 是 在 第 一 层 之 
上 的 第 二 层 。 如 果 在 一 个 级 联 处 的 子 菜单 上 单 击 链接 , 这 是 另 一 个 层 ( 它 也 可 能 与 第 一 个 层 不 是 同 级 ) 。 

定义 这 些 数据 块 的 方法 是 通过 使 用 <div> 标 签 。 这 些 标签 在 一 个 文档 中 创建 一 个 确定 的 块 级 结构 。 
它 与 <p> 标 签 类 似 ，<p> 标 签 示意 一 个 新 段 的 开始 ， 且 将 它 里 面 的 数据 定 为 一 个 段落 。 在 <div> 标 签 定义 
数据 块 时 ， 会 通过 浏览 器 进行 转换 。 

使 用 <div> 标 签 很 简单 。 必 须 做 的 事情 就 是 将 它 放 在 想 定 义 为 一 个 数据 块 的 元 素 的 周围 。 

例如 , 在 下 面 的 例子 中 包含 两 个 <div> 块 。 在 第 一 个 块 内 , 有 两 个 水 平 标尺 <hr> 标 签 以 及 文本 DIV1; 
在 第 二 个 块 内 ， 包 含 了 一 个 三 级 标题 <h3> 标 签 以 及 一 个 段落 <p> 标 签 。 还 在 每 个 <block> 块 之 前 和 之 后 
包含 了 一 些 文本 以 便 可 以 看 到 它们 从 哪里 开始 ， 到 何 处 结束 。 代 码 如 下 。 


<html> 
<head> 
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<title></title> 
</head> 
<body> 
Before the first block. 
<div name="layer1"> 
<hr> 
DIV 1 
<hr> 
</div> 
After the first block. 
<br> 
Before the second block. 
<div name="layer2"> 
<h3> 
<p> 
lam inside the second DIV block. 
</p> 
</div> 
After the second block. 
</body> 
</html> 


8.2” <div> 标签 


殴 4 教学 录像 光盘 \TM\Ix\8\<div> 标 签 .exe 

div 元 素 是 用 来 为 HTML 文档 内 大 块 〈block-level) 的 内 容 提供 结构 和 背景 的 元 素 。div 的 起 始 标签 和 
结束 标签 之 间 的 所 有 内 容 都 是 用 来 构成 这 个 块 的， 其 中 所 包含 元 素 的 特性 由 <div> 标 签 的 属性 来 控制 , 或 者 
是 通过 使 用 样式 表格 式 化 这 个 块 来 进行 控制 的 。Internet Explorer 和 Netscape 浏览 器 都 支持 <div> 标 签 。 


8.2.1 <div> 标 签 的 简介 


div 全 称 division， 意 为 “区 分 ”。<div> 标 签 被 称 为 区 隔 标签 ， 表 示 一 块 可 显示 HTML 的 区 域 ， 
于 设置 字 、 图 片 、 表 格 等 的 摆 放 位 置 。<div> 标 签 是 块 元 素 ， 需 要 关闭 标签 。 


语法 


<div> 
<jdiv> 
例如 ， 下 面 的 例子 使 用 了 两 个 <div> 标 签 对 两 段 文字 进行 了 不 同 的 对 齐 处 理 ， 代 码 如 下 。 


<div> 
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此 文本 代表 一 段 。 

</div> 

<div align="center"> 

此 文本 代表 另外 一 段 ， 其 中 文本 居中 显示 。 


</div> 


<div align="center"> 的 作用 和 居中 标签 <center> 一 样 ， 前 者 是 由 HTML 3.0 开始 的 标准 ， 后 者 是 通 


已 久 的 标记 法 。 


<div> 应 用 于 Style Sheet (样式 表 ) 方面 会 更 显 威力 , 它 最 终 目的 是 给 设计 者 提供 另 一 种 组 织 形式 ， 


有 Class、Style、title、ID 等 属性 。 
8.2.2 ” <div> 标签 的 属性 

在 了 解 和 使 用 移动 层 或 <div> 块 之 前 ， 首 先 来 了 解 <div> 标 签 的 属性 。 在 页 
用 到 <div> 标 签 的 属性 。 

语法 

<div id="value" align="value" class="value" style="value"> 


</div> 


加 入 层 时 ， 会 经 常 应 


id: <div> 标 签 的 id 也 可 以 说 是 它 的 名 字 ， 常 与 CSS 样式 相 结 合 ， 实 现 对 网 页 中 元 素 的 控制 。 
align: 用 于 控制 <div> 标 签 中 的 元 素 的 对 齐 方式 ， 其 值 可 以 是 left、center 和 right， 分 别 用 于 设置 


元 素 的 居 左 、 居 中 和 居 右 对 齐 。 


class: 用 于 设置 <div> 标 签 中 的 元 素 的 样式 。 其 值 为 CSS 样式 中 的 class 选择 符 。 
style: 用 于 设置 <div> 标 签 中 的 元 素 的 样式 。 其 值 为 CSS 属性 值 ， 各 属性 值 应 用 分 号 分 隔 。 


下 面 介 绍 <div> 标 签 的 属性 及 其 说 明 ， 如 表 8.1 所 示 。 
表 8.1 <div> 标 签 的 属性 


属 性 说 明 
accesskey 设置 或 检索 对 象 的 快捷 键 
align 设置 或 检索 对 象 相 对 于 显示 或 表格 的 排列 方式 
atomicselection 指定 元 素 及 其 内 容 是 否 可 以 以 不 可 见 形式 统一 选择 
begin 设置 或 检索 时 间 线 在 该 元 素 上 播放 前 的 延迟 时 间 
class 设置 或 检索 对 象 的 类 
contenteditable 设置 或 检索 表明 用 户 是 否 可 编辑 对 象 内 容 的 字符 串 
datafld 设置 或 检索 由 datasrc 属性 指定 的 绑 定 到 指定 对 象 的 给 定数 据 源 的 字段 
dataformatas 设置 或 检索 如 何 泻 染 提供 给 对 象 的 数据 
datasrc 设置 或 检索 用 于 数据 绑 定 的 数据 源 
dir 设置 或 检索 对 象 的 阅读 顺序 
disabled 设置 或 检索 控件 的 状态 
end 设置 或 检索 表明 元 素 结束 时 间 的 值 ， 或 者 元 素 设置 为 重复 的 简单 持续 终止 时 间 
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续 表 
属 性 说 明 
hidefocus 设置 或 检索 表明 对 象 是 否 显示 表明 焦点 的 值 
id 检索 标记 对 象 的 字符 串 
lang 设置 或 检索 要 使 用 的 语言 
language 设置 或 检索 当前 脚本 编写 用 的 语言 
nowrap 设置 或 检索 浏览 器 是 否 自动 执行 换行 
style 为 该 元 素 设置 内 婴 样 式 
syncmaster 设置 或 检索 时 间 容 器 是 否 必须 在 此 元 素 上 同步 回放 
systembitrate 检索 系统 中 大 约 可 用 带宽 的 bps 
systemcaption, 表明 是 否 要 显示 文本 来 代替 演示 的 音频 部 分 
systemlanguage 表明 是 否 在 用 户 计 算 机 上 的 选项 设置 中 选中 了 给 定语 言 
指定 针对 那些 正在 观看 演示 但 对 被 播放 的 音频 所 使 用 的 语言 并 不 熟悉 的 用 户 来 说 是 否 


systemoverduborsubtitle 


tabindex 
timecontainer 
title 
unselectable 


要 渲染 配音 或 字幕 

设置 或 检索 定义 对 象 的 tab 顺序 的 索引 
设置 或 检索 与 元 素 关 联 的 时 间 线 类 型 
设置 或 检索 对 象 的 咨询 信息 工具 提示 ) 
指定 该 元 素 不 可 被 选中 


下 面 对 <div> 标 签 的 常用 属性 进行 介绍 。 


1，align 属性 


通过 设置 属性 align， 可 以 改变 <div> 标 签 的 水 平 对 齐 方式 。 


语法 

<tr align="left"> 

<tr align="center > 
<tr align="right"> 
left: 居 左 对 齐 。 
center: 居中 对 齐 。 
right: 居 右 对 齐 。 


例如 ， 使 用 align 属性 设置 文字 居中 对 齐 ， 代 码 如 下 。 


<div align=center> 


此 文本 代表 另外 一 段 ， 其 中 文本 居中 显示 。 


</div> 


2， id 属性 


id 属性 用 于 定义 
语法 


id="str" 


个 元 素 的 独特 的 样式 ， 即 设置 标签 的 标记 。 


165 


HTML 5 从 入 门 到 精通 


例如 ， 一 个 CSS 规则 : 
#font1 {font-size: larger} 


使 用 方法 
id="font1" 


id 是 一 个 标签 ， 用 于 区 分 不 同 的 结构 和 内 容 ， 就 像 人 的 名 字 ， 如 果 一 个 房间 中 有 两 个 人 同名 ， 就 


吵 


H 现 混淆 。 
3， class 属性 


class 属性 用 于 指定 元 素 属于 何 种 样式 的 类 ， 即 设置 标签 的 类 。 


语法 
classname { color } 


classname: class 属性 的 名 称 。 
例如 ， 样 式 表 可 以 加 入 : 


color1 { color: lime; background: #FF80C0 } 


使 用 方法 


class="color1" 


CS 四 
“class 是 一 个 样式 ， 可 以 套 在 任何 结构 和 内 容 上 。 


从 概念 上 说 ，id 属性 和 class 属性 是 不 一 样 的 ， 下 面 介绍 其 具体 区 别 。 
id 属性 是 先 找到 结构 和 内 容 ， 再 给 它 定义 样式 。 


id 属性 通常 用 于 定义 页 面 上 一 个 仅 H 


tH 现 一 次 的 标签 。 在 对 页 面 排版 进行 结构 化 布局 时 通常 一 个 


页 面 都 是 由 一 个 页 眉 、 一 个 报头 <masthead>、 一 个 内 容 区 域 和 一 个 页 脚 等 组 成 ) 一 般 使 用 id 比较 理想 ， 


因为 一 个 id 在 一 个 文档 中 只 能 使 用 一 次 。 
class 属性 是 先 定义 好 一 种 样式 ， 


而 这 些 元 素 在 同一 页 面 中 很 少 会 出 现 大 于 一 次 的 情况 。 
再 套 给 多 个 结构 和 内 容 。 


class 属性 用 于 根据 用 户 定义 的 标准 对 一 个 或 多 个 元 素 进行 定义 。 打 个 比较 恰当 的 比方 就 是 剧本 : 
一 个 class 可 以 定义 剧本 中 每 个 人 物 的 故事 线 ， 可 以 通过 CSS、JavaScript 等 来 使 用 这 个 类 。 因 此 可 以 


在 一 个 页 面 上 使 用 class="frodo"、class= 


要 的 一 点 是 可 以 在 一 个 文档 中 使 用 任意 次 数 的 class。 


总 而 言 之 ，class 属性 可 以 反复 使 用 ， 
器 中 反复 使 用 同一 个 id 都 不 会 出 现 问题 ， 
器 出 现 问题 。 
还 有 一 个 区 别 ， 在 一 个 结构 文档 中 ， 
定义 一 个 描述 字体 的 CSS， 代 码 如 下 。 
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"gandalf" 和 class="aragorn" 来 区 分 不 同 的 故事 线 。 还 有 非常 重 


而 id 属性 在 一 个 页 面 中 仅 能 使 用 一 次 。 有 可 能 在 大 部 分 浏览 
但 在 标准 上 这 绝对 是 错误 的 使 用 ， 而 且 很 可 能 导致 某 些 浏览 


可 以 多 处 使 用 同一 个 class 名 ， 而 id 名 必须 是 唯一 的 。 例 如 ， 
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font { 
color:#009900; 


} 
下 面 的 文档 中 将 多 次 使 用 到 同一 个 样式 表 “.font”， 其 代码 如 下 。 


<h1 class=".font">JavaScript 技术 大 全 </h1> 
<div class=".font"> 网 址 : http://www.mingrisoft.com</div> 


而 id 名 在 同一 个 文档 中 是 需要 唯一 的 ， 名 称 不 可 以 重复 。 


me 在 实际 应 用 中 ，class 可 能 对 文字 的 排版 等 比较 有 用 ， 而 过 则 对 宏观 布局 和 设计 放置 各 各 
元 素 较 有 用 。 
4. style 属性 
style 属性 用 于 设置 对 象 的 内 拔 样式 。 
语法 


<div style=""> 


<Jdiv> 
例如 ， 使 用 style 属性 定义 <div> 标 签 样式 ， 代 码 如 下 。 
<div style="overflow:auto;width:100%;line-height:14pt;letter-spacing:0.2em;height:300px"> 
日 志 内 容 
</div> 
style 属性 的 常用 参数 说 明 如 表 8.2 所 示 。 
表 8.2 style 属性 的 常用 参数 说 明 


参 数 值 说 明 
overflow 溢出 控制 : visible (默认 、 可 见 ) 、auto〈 自 动 ) 、scroll (显示 滚动 条 ) 
width 宽度 : 数值 
height 高 度 : 数值 
color 字体 颜色 : 色彩 代码 
font-size 字体 大 小 : 数值 
line-height 行 高 ， 数 值 
Gonder 边框 : 宽度、 类 型 和 颜色 ， 其 中 ， 类 型 主要 支持 none、dotted、dashed、solid、double、 


groove、 ridge、inset、window-inset、outset 


font-weight 字体 粗细 : normal、bold、bolder、lighter 


字体 类 型 ，Arial、Tahoma、Verdana、 仿 宋 GB2312、 黑 体 、 楷 体 _ GB2312、 隶 书 、 宋 
体 、 幼 


font-family 


background 背景 颜色 : 色彩 代码 


滚动 条 各 部 分 的 颜色 : 色彩 代码 


scrollbar-base-color 
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续 表 
参 数 值 说 有明 
Filter:chroma chroma 过 滤器 : 色彩 代码 ， 该 颜色 将 对 象 转换 成 透明 效果 
word-break 断 字 : normal (默认 ， 正 常 断 字 ) 、keep-all (严格 不 断 字 ) 、break-all (严格 断 字 ) 
direction 文字 方向 ;ltr (默认 ， 从 左 向 右 ) 、r〈 从 右 向 左 ) 
position 设置 定位 方式 ， 取 值 absolute、relative 
displa 设置 元 素 的 浮动 特征 


(1) position 属性 


style 属性 最 常用 的 功能 之 一 就 是 进行 <div> 标 签 的 定位 ， 其 对 应 的 属性 为 position 属性 。 


语法 


position: static | absolute | relative 


static: 无 特殊 定位 ， 对 象 遵循 HTML 定位 规则 。 

absolute: 将 对 象 从 文档 流 中 拖 出 ， 使 用 left、right、top、bottom 等 属性 进行 绝对 定位 。 而 其 层 登 
通过 z-index 属性 定义 。 此 时 对 象 不 具有 边 距 ， 但 仍 有 补 白 和 边框 。 

relative: 对 象 不 可 层 登 ， 但 将 依据 left、right、top、bottom 等 属性 在 正常 文档 流 中 偏 移 位置 。 

其 具体 的 属性 值 可 以 通过 表 8.3 中 所 示 的 参数 进行 设置 。 


表 8.3 position 属性 的 参数 说 明 


参 数值 说 了 明 

left 相对 于 窗口 左边 的 位 置 ， 单 位 为 像素 (pixels) 
top 相对 于 窗口 上 边 的 位 置 ， 单 位 为 像素 (pixels) 
width <div> 标 签 的 宽度 。 所 有 在 <div> 标 签 里 的 文字 或 HTML 元 素 都 包含 在 里 面 
height <div> 标 签 的 高 度 。 该 属性 很 少 使 用 ， 除 非 想 要 对 层 进行 分 割 

给 出 层 的 可 见 部 分 。 该 属性 能 够 使 得 <div> 标 签 显示 为 一 个 定义 得 很 准确 的 方块 区 域 ， 
ip 参数 为 rect(top,right,bottom,left) 
visibilit 隐藏 或 显示 <div> 标 签 中 的 元 素 ， 其 值 为 visible、hidden 和 inherit 
Z-index <div> 标 签 的 立体 位 置 ， 值 越 大 ，<div> 标 签 的 位 置 越 高 
background-color <div> 标 签 的 背景 颜色 
layer-background-color Netscape 的 <div> 标 签 的 背景 颜色 
background-image <div> 标 签 的 背景 图 像 


layer-background-image 


输 昌 


(2) display 属性 


Netscape 的 <div> 标 签 的 背景 图 像 


style 属性 的 另 一 个 常用 功能 是 控制 <div> 标 签 的 display 属性 , 用 于 设置 元 素 的 浮动 特征 , 当 display 
被 设置 为 block〈 块 ) 
为 inline， 将 使 其 行为 和 元 素 inline 一 样 ， 即 使 它 是 普通 的 块 元 素 ， 它 也 将 会 被 组 合成 像 <span> 那 样 的 


H 流 输出 到 页 面 上 ; 


都 会 被 自动 跟 上 填充 


对 ， 容 器 中 所 有 元 素 都 将 会 被 当做 一 个 单独 的 块 放 入 到 页 面 中 ; 将 display 设置 


将 display 设置 为 none， 则 该 元 素 实 际 上 就 从 页 面 中 被 移 走 ， 它 下 面 的 所 有 元 素 


上 


display 属性 可 以 
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语法 


display:block | none | inline | compact | marker | inline-table | list-item | run-in | table ltable-caption | table-cell | 
table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group 


display 属性 的 参数 值 如 表 8.4 所 示 。 
表 8.4 display 属性 的 参数 说 明 


参 数 值 描述 
block 默认 值 。 用 该 值 为 对 象 之 后 添加 新 行 
none 隐藏 对 象 。 与 visibility 属性 的 hidden 值 不 同 ， 它 不 为 被 隐藏 的 对 象 保留 其 物理 空间 
inline 内 联 对 象 的 默认 值 。 用 该 值 将 从 对 象 中 删除 行 
compact 分 配对 象 为 块 对 象 或 基于 内 容 之 上 的 内 联 对 象 

指定 内 容 在 容器 对 象 之 前 或 之 后 。 要 使 用 此 参数 , 对 象 必须 和 :after 及 :before 伪 元 素 一 起 

marker 使 用 
inline-table 将 表格 显示 为 无 前 后 换行 的 内 联 对 象 或 内 联 容 器 
list-item 将 块 对 象 指定 为 列表 项 目 。 并 可 以 添加 可 选项 目标 志 
run-in 分 配对 象 为 块 对 象 或 基于 内 容 之 上 的 内 联 对 象 
table 将 对 象 作为 块 元 素 级 的 表格 显示 
table-caption 将 对 象 作为 表格 标题 显示 
table-cell 将 对 象 作为 表格 单元 格 显 示 
table-column， 将 对 象 作为 表格 列 显示 


table-column-group 将 对 象 作 为 表格 列 组 显示 
table-header-group 将 对 象 作为 表格 标题 组 显示 


table-footer-group 将 对 象 作为 表格 脚注 组 显示 
table-row 将 对 象 作为 表格 行 显示 
table-row-group 将 对 象 作为 表格 行 组 显示 


(3) display 属性 和 visibility 属性 的 对 比 
visibility 属性 用 来 确定 元 素 是 显示 还 是 隐藏 ， 这 用 visibility="visible/hidden" 来 表示 ，visible 表示 显 
示 ，hidden 表示 隐藏 。 当 visibility 被 设置 为 hidden 时 ， 元 素 虽然 被 隐藏 了 ， 但 它 仍然 占据 它 原来 所 在 
的 位 置 。 例 如 : 


<script language="JavaScript"> 
function toggleVisibility(me){ 
if (me.style.visibility=="hidden"X{ 
me.style.visibility="visible"; 
} 
else{ 
me.style.visibility="hidden"; 
} 
1 
</script> 
<div onclick="toggleVisibility(this)" style="position:relative"> 
第 一 行文 本 将 会 触发 "hidden" 和 "visible" 属 性 ， 注 意 第 二 行 的 变化 。</div> 
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<div> 因 为 visibility 会 保留 元 素 的 位 置 ， 所 以 第 二 行 不 会 移动 。</div> 
运行 结果 : 

第 一 行文 本 将 会 触发 "hidden" 和 "visible" 属 性 ， 注 意 第 二 行 的 变化 。 
因为 visibility 会 保留 元 素 的 位 置 ， 所 以 第 二 行 不 会 移动 。 


全 注意 元 未 补 隐藏 之 后 ,就 不 能 再 接收 其 他 事件 了 ， 所 以 在 第 一 彼 代 码 中 ， 当 其 被 设 为 hidden 
时 ， 就 不 能 再 接收 响应 事件 了 ， 因 此 也 就 无 法 通过 和 鼠标 单 击 第 一 段 文本 令 其 显示 出 来 。 


另 一 方面 ，display 属性 与 visibility 属性 相 比 有 些 不 同 。visibility 属性 是 隐藏 元 素 但 保持 元 素 的 浮 
动 位 置 ， 而 display 实际 上 是 设置 元 素 的 浮动 特征 。 
例如 ， 利 用 display 属性 显示 文本 效果 ， 代 码 如 下 。 


<script language="JavaScript"> 
function toggleDisplay(me){ 
if (me.style.display=="block"){ 
me.style.display="inline"; 
alert(" 文 本 现在 是 : 'inline'."); 
4 
else{ 
if (me.style.display=="inline")}{ 
me.style.display="none"; 
alert(" 文 本 现在 是 :none'. 3 秒 钟 后 自动 重新 显示 。"); 
window.setTimeout("blueText.style.display='block';",3000,"JavaScript"); 


else{ 
me.style.display="block"; 
alert(" 文 本 现在 是 :'block"."); 
} 

} 


</script> 
<div> 在 <span id="blueText" onclick="toggleDisplay(this)" 
style="color:blue;position:relative;cursor:hand;"> 蓝 色 </span> 文 字 上 单 击 来 查看 效果 。</div> 


运行 结果 : 在 蓝 色 文 字 上 单 击 来 查看 效果 。 


8.2.3 <span> 标签 与 <div> 标 签 


HTML 只 是 赋予 内 容 的 手段 ， 大 部 分 HTML 标签 都 有 其 意义 (如 <p> 标 签 创建 段落 ，<h1> 标 签 创 
建 标题 等 ) ， 然 而 <span> 和 <div> 标 签 似乎 没有 任何 内 容 上 的 意义 ， 但 实际 上 ， 与 CSS 结合 起 来 后 ， 应 
用 范围 就 非常 广泛 了 。 

它们 被 用 来 组 合成 一 大 块 的 HTML 代码 并 赋予 一 定 的 信息 ， 大 部 分 用 类 属性 class 和 标记 属性 id 
与 元 素 联 系 起 来 。 

例如 ， 要 强调 单词 “crazy” 和 加 粗 类 “paper”， 代 码 如 下 。 
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<div id="scissors"> 
<p>This is <strong class="paper">crazy</strong></p> 
</div> 


4 
说 归 这 个 做 法 比 再 加 一 个 <span> 标 签 还 要 好 . 需要 记 住 的 是 ，<span> 标 签 和 <div> 标 签 是 “无 
意义 ”的 标签 。 


1，<span> 标 签 与 <div> 标 签 的 相同 之 处 


<span> 标 签 和 <div> 标 签 非常 类 似 ， 是 HTML 中 组 合用 的 标签 ， 可 以 作为 插入 CSS 这 类 风格 的 容 
器 ， 或 插入 class.id 等 语法 内 容 的 容器 。 
例如 ， 使 用 <div> 标 签 作为 HTML 标签 的 容器 ， 代 码 如 下 。 


<div id="client-boyera" class="client"> 

<p><span class="clientrtitle">client information:</span> 
<table class="client-data"> 

<tr><th>last name:<td>boyera</tr> 

<tr><th>first name:<td>stephane</tr> 
<tr><th>tel:<td>0431-123456</tr> 

</table> 

</div> 


2. <span> 标 签 与 <div> 标 签 的 区 别 


div (division〉 是 一 个 块 级 元 素 ， 可 以 包含 段落 、 标 题 、 表 格 ， 乃 至 诸如 章节 、 摘 要 和 备注 等 。 而 
span 是 行内 元 素 ，span 的 前 后 是 不 会 换行 的 ， 它 没有 结构 的 意义 ， 纯 粹 是 应 用 样式 ， 当 其 他 行内 元 素 
都 不 合适 时 ， 可 以 使 用 span。 

从 功能 角度 来 说 ，<div> 标 签 一 般 用 来 做 布局 ， 而 <span> 标 签 用 来 做 文字 的 效果 ， 尤 其 是 标题 和 链 
接 的 效果 ， 所 以 我 们 会 经 常 看 见 诸如 <hl class="..."><span>.….</span></h1> 之 类 的 代码 。 

不 过 ， 块 元 素 和 行内 元 素 也 不 是 一 成 不 变 的， 只 要 给 块 元 素 定 义 display:inline， 块 元 素 便 成 为 内 肉 元 
素 ; 同样 ， 给 内 嵌 元 素 定义 display:block 后 ， 内 嵌 元 素 便 成 为 块 元 素 。block 和 inline 的 区 别 主要 有 内 容 模 
型 《Content model) 、 格 式 〈formatting) 和 Directionality (如 何 处 理 两 种 语言 混合 在 一 起 的 unicode 码 ) 。 

例如 : <div>.…</div> 是 块 ，<span>.….</span> 是 行 ， 块 里 可 以 含 行 ， 即 div 块 里 可 以 有 span 行 。 

</div> 显 示 时 《分 块 结束 处 ) ， 系 统 自动 换行 ， 而 </span> 不 换行 。 

例如 ， 当 使 用 <div> 标 签 时 ， 代 码 如 下 。 


<p>aaaaaaaaa<div>bbbbbbbbb</div><div>ccccc<p>ccccc</div> 


运行 结果 : 


aaaaaaaaa 
bbbbbbbbb 
Ccccc 
CCcccc 
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当 使 用 <span> 标 签 时 ， 代 码 如 下 所 示 。 
<p>aaaaaaaaa<span>bbbbbbbbb</span><span>ccccc<p>ccccc</span> 
运行 结果 : 


aaaaaaaaabbbbbbbbbccccc 
Ccccc 


8.3 ”<iframe> 标 签 


<ifttame> 标 签 ， 又 叫 浮 动 帧 标签 ， 可 以 利用 <iframe> 标 签 将 一 个 HTML 文档 嵌入 在 一 个 HTML 中 
显示 。 使 用 <iframe> 标 签 ， 能 够 拖 入 外 部 文件 。 这样 可 以 更 好 地 管理 内 容 ， 并 且 提 供 了 一 种 在 不 同位 置 
包含 内 容 的 机 制 。 


8.3.1 ” <iframe> 标 签 的 简介 


<iframe> 标 签 可 以 构成 一 种 特殊 的 框架 结构 , 被 称 为 浮动 框架 , 它 是 在 浏览 的 窗口 中 嵌 套 另外 的 网 
页 文件 。 
语法 


<iframe>.…</iframe> 


和 9 注意 由 合 -iame> 标 从 是 HTML 4 推荐 标准 的 一 部 分 ， 它 当前 并 不 被 Navigator 浏览 器 支持 . 
然而 ， 对 这 个 标签 的 支持 将 在 Navigator 5 中 被 加 入 ，Navigator 5 是 来 自 Mozilla.org 的 开放 源 代码 
浏览 器 。 为 了 仿真 这 个 标签 的 功能 ， 可 以 对 Navigator 4.x 浏览 器 使 用 <ilayer> 标 签 。 


8.3.2 ”<iframe> 标 签 的 属性 


<iframe> 标 签 是 一 种 特殊 的 框架 页 面 ,在 浏览 器 窗口 中 可 以 嵌 套 子 窗口 ,在 其 中 显示 子 页 面 的 内 容 。 
语法 


<iframe src=" 文 件 " height=" 数 值 " width=" 数 值 " name=" 框 架 名 称 " scrolling=" 值 " frameborder=" 值 "> 
</iframe > 


<iframe> 标 签 拥有 自己 的 属性 ，<iframe> 标 签 的 属性 如 表 8.5 所 示 。 
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表 8.5 ”<iframe> 标 签 的 属性 说 明 


属 性 说 ”有 明 

人 用 于 对 齐 包含 在 <iframe> 标 签 中 的 数据 ， 并 且 可 以 取 left、right、center 以 及 justify 值 。 
因 支 持 使 用 CSS 对 齐 元 素 而 过 时 

class 一 个 以 逗号 分 隔 的 样式 类 别 表 ， 这 些 样式 类 将 标签 实例 化 为 已 定义 的 类 的 一 个 实例 

frameborder 取 0 或 者 1 值 以 判断 是 否 应 该 在 帧 四 周 画 一 个 框 

height 指定 <iframe> 的 高 度 

id 通常 由 样式 单 来 定义 应 该 被 应 用 于 标签 中 的 数据 的 样式 类 型 

logndesc 到 一 个 标签 内 容 的 一 个 较 长 描述 的 链接 

marginhergh 帧 的 内 容 与 边框 的 上 、 下 边 之 间 的 像素 数 

marginwidth 帧 的 内 容 与 边框 的 左 、 右 边 之 间 的 像素 数 

name 用 于 给 块 命名 。 它 可 以 由 JavaScript 用 来 对 层 进行 操作 

noresize 禁止 用 户 重 新 调整 帧 的 大 小 

scrolling 取 auto、yes 或 no 值 为 判断 滚动 条 是 否 显示 

STC 指定 包含 <iframe> 的 内 容 的 URL 

style 允许 在 标签 内 指定 一 个 样式 定义 ， 而 不 是 在 一 个 样式 表 内 指定 

title 允许 为 标签 提供 一 个 比 <iframe> 标 签 更 有 信息 量 的 标题 ， 它 应 用 于 整个 文档 

width 指定 <iframe> 的 宽度 


下 面 对 <iframe> 标 签 属性 进行 详细 介绍 。 
回 ”浮动 框架 的 文件 路 径 属性 src。 


语法 


<iframe src="file_name"> 


file name: 指明 浮动 框架 文件 的 文件 名 或 者 其 他 超 链 接 的 网 址 。 
浮动 框架 的 名 称 属性 name。 


语法 


<iframe src="file_name" name="frame_name"> 


frame_name: 定义 的 浮动 框架 名 称 。 
浮动 框架 的 对 齐 属性 align。 


语法 


<iframe src="file_name" align="left/center/right"> 


left: 居 左 对 齐 。 
center: 居中 对 齐 。 
right: 居 右 对 齐 。 


回 ”浮动 框架 的 宽度 和 高 度 属性 width、height。 
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语法 

<iframe src="file_name" width="value" height= "value"> 

width: 浮动 框架 的 宽度 。 

height: 浮动 框架 的 高 度 。 

浮动 框架 滚动 条 显示 属性 scrolling。 

语法 

<iframe src="file_name" scrolling="value"> 

value: 值 为 yes 代表 显示 滚动 条 ， 值 为 no 代表 不 显示 滚动 条 , 值 为 auto 代表 根据 窗口 内 容 决定 是 
否 显示 滚动 条 。 

浮动 框架 边框 属性 frameborder。 

语法 

<iframe src="file_name" frameborder="value"> 

value: 值 为 yes 代表 显示 框架 边框 ， 值 为 no 代表 隐藏 框架 边框 。 

浮动 框架 边缘 的 宽度 和 高 度 属性 marginwidth、marginheight。 

语法 

<iframe src="file_name" marginwidth="value" marginheight="value"> 

marginwidth: 设 定 浮动 框架 左右 边缘 距离 边框 的 宽度 。 

marginheight: 设 定 浮动 框架 上 下 边缘 距离 边框 的 高 度 。 

<iframe> 标 签 只 适用 于 IE 浏览 器 。 它 的 作用 是 在 网 页 中 插入 一 个 框架 窗口 以 显示 另 一 个 文件 。 通 
常 ， 浮 动 框架 配合 一 段 能 够 辨认 浏览 器 的 JavaScript 代码 会 有 比较 好 的 效果 。 


ER 
忽略 . 


8.4 ”<layer> 标 签 和 <ilayer> 标 签 


可 以 用 <layer> 标 签 和 <ilayer> 标 签 在 Navigator 中 定义 层 。<layer> 标 签 和 <ilayer> 标 签 允许 在 一 个 页 
上 精确 地 定位 一 个 层 ，<layer> 标 签 和 <ilayer> 标 签 可 以 出 现在 文档 的 流程 的 任何 地 方 。 
语法 


<layer>...</layer> 
<ilayer>...</ilayer> 
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<layer> 标 签 和 <ilayer> 标 签 的 属性 如 表 8.6 所 示 。 


表 8.6 ”<layer> 标 签 和 <ilayer> 标 签 的 属性 说 明 


属 性 说 明 
above 在 文档 中 的 所 有 层 的 z-order 中 较 高 的 Layer 对 象 ( 如 果 层 是 最 项 的 ， 为 null) 
background 用 作 层 的 背景 图 的 URL 
below 在 文档 中 的 所 有 层 的 z-order 中 较 低 的 Layer 对 象 ( 如 果 层 是 最 低 的 ， 为 null) 
bgcolor 层 的 背景 色 
clip 定义 剪 切 长 方形 。 这 个 长 方形 是 层 的 可 见 区 域 ， 区域 之 外 的 任何 东西 都 被 人 为 地 从 视野 中 剪 掉 
height 以 像素 为 单位 的 层 的 高 度 
left 以 像素 为 单位 的 层 相对 于 它 的 父 层 的 区 域 的 x 轴 的 位 置 
name 层 的 名 字 
sre 层 的 内 容 来 源 的 URL 
top 以 像素 为 单位 的 层 相对 于 它 的 父 层 的 区 域 的 y 轴 的 位 置 
Visibii 定义 层 的 可 见 性 属性 。show 显示 层 ，hide 隐藏 层 ，inherit 继承 它 的 父 层 的 可 见 性 
width 以 像素 为 单位 的 层 的 宽度 
z-index, 层 相对 于 它 的 兄弟 元 素 和 父 元 素 的 相对 z-order 


8.4.1 标签 层 的 使 用 


层 的 标签 <layer> 和 <ilayer> 用 来 重合 显示 Web 内 容 的 各 个 实体 。 
例如 , 在 下 4 中 ,可 以 用 Background-Repeat 属性 的 no-Repeat 值 来 显示 一 个 独立 而 不 是 平 铺 的 背 


景 ， 这 能 使 页 面 的 风格 为 之 一 新 ,但 NC 和 NV 都 不 支持 这 一 属性 ， 可 以 用 


以 让 它 显示 在 任意 地 方 。 代 码 如 下 。 


<html> 
<head> 
<title></title> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 


</head> 


<body bgcolor="ffffff"> 


<!-- 背 景 层 --> 
<layer top="100" 


left="200" z-index="1"> 


<table width="200" border="0" bgcolor="#3399FF"> 


<tr> 


<td>&nbsp;</td> 


<htr> 
</table> 
</layer> 
<!-- 主 体 层 --> 


<layer z-index="2"> 


普通 HTML 语句 


层 来 达到 这 种 效果 ， 还 可 
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</layer> 
</body> 
</html> 


pe a 
在 背景 层 上 面 ,否则 背景 层 就 盖 住 了 主体 层 .通过 这 个 例子 可 以 在 页 面 的 任何 位 置 上 放置 和 主体 层 
重要 的 图 片 。 


8.4.2 ”<layer> 标 签 和 <ilayer> 标 签 的 区 别 


<ilayer> 标 签 与 <layer> 标 签 的 属性 是 完全 一 致 的 ， 唯 一 的 区 别 在 于 <ilayer> 标 签 包含 有 流动 性 的 
<inflow> 坐 标 。 例 如 : 

<layer id=a1 top ”10> 第 一 行 </layer> 

<layer id=a1 ”top ”10> 第 二 行 </layer> 

<layer id=a1 ”top ”10> 第 三 行 </layer> 

这 样 一 来 ，3 条 记录 会 重 县 在 一 起 。 

若 改 用 <ilayer> 标 签 ， 例 如 : 

<ilayer id=a1 ”top ”10> 第 一 行 </ilayer> 


<ilayer id=a1 ”top ”10> 第 二 行 </ilayer> 
<ilayer id=a1 ”top ”10> 第 三 行 </ilayer> 


这 样 一 来 ， 这 3 条 记录 就 可 以 自动 分 行 显示 。 
8.5 应 用 div 制作 下 拉 菜 单 导 航 条 


名 教学 录像 : 光盘 \TM\Ix\8\ 应 用 div 制作 下 拉 菜单 导航 条 .exe 

例 8.1 本 实例 通过 层 制作 了 一 个 下 拉 菜 单 ， 当 用 鼠标 指向 菜单 时 , 会 在 指定 的 菜单 下 面 显示 下 拉 
列表 ， 并 可 以 通过 单 击 下 拉 列 表 中 的 选项 进入 指定 的 网 页 。 运 行 结果 如 图 8.6 一 图 8.8 所 示 。《〔 实 例 位 
置 光盘 \TMNsI\8\1) 


可 光 | 开 办 避 办 四 拘 枕 归于 忆 国友 | 
图 8.6 下 拉 菜 单 的 初始 效果 


Fem 


8.7 弹出 下 拉 菜 单 的 菜单 项 
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图 8.8 在 下 拉 菜 单 中 选中 菜单 项 


本 实例 主要 是 用 CSS 样式 中 的 display 属性 来 控制 层 是 否 显示 , 当 层 显示 时 ,用 CSS 样式 中 的 rectQ 
方法 来 对 层 以 y 轴 逐 渐 增 大 的 方式 进行 局 部 显示 。 


(1) 在 页 面 中 添加 CSS 样式 ， 用 于 改变 下 拉 菜 单 的 颜色 及 位 置 。 代 码 如 下 所 示 。 


<style type="text/css"> 
.menubar{position:absolute;top:10px;width:100px;height:20px;cursor:default; 
border-width:1px;border-style:outset;color:#99FFFF;background:#669900} 
.menu{position:absolute;top:32px;width:140px;display:none;border-width:2px; 
border-style:outset;border-color:white sliver sliver white;background:#333399; 
padding:15px} 

.menu At{text-decoration:none;color:#99FFFF;} 

.menu A:hover{color: #FFFFFF;} 

</style> 


(2) 在 页 面 中 添加 一 个 表格 ， 用 于 控制 下 拉 菜 单 的 位 置 及 大 小 。 代 码 如 下 所 示 。 


<table width="400" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size:15px"> 
<tr> 

<td width="20%"> 

<div align="center"id="Tdiv_1" class="menubar" onmouseover="divControl(1)" onmouseout="divControl 
教育 网 站 

</div> 

</td> 

<td width="20%"> 

<div align="center"id="Tdiv_2" class="menubar" onmouseover="divControl(1)" onmouseout="divControl 
电脑 丛书 网 站 

</div> 

</td> 

<td width="20%"> 

<div align="center"id="Tdiv_3" class="menubar" onmouseover="divControl(1)" onmouseout="divControl 
新 出 图 书 

</div> 

</td> 

<td width="20%"> 

<div align="center"id="Tdiv_4" class="menubar" onmouseover="divControl(1)" onmouseout="divControl 
其 他 网 站 

</div> 

</td> 

</tr> 

<tr> 

<td width="20%"> 


(0)"> 


(9 


(0)"> 


(0)"> 
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<div align="left"id="Div1" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)"> 
<a href="#"> 重 庆 XX 大 学 </a><br> 

<a href="#"> 长 春 XX 大 学 </a><br> 

<a href="#"> 吉 林 XX 大 学 </a> 

</div> 

</td> 

<td width="20%"> 

<div align="|left"id="Div2" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)"> 
<a href="#">VB 图 书 </a><br> 


<a href="#">JScript 图 书 </a><br> 
<a href="#">Java 图 书 </a></div> 


</td> 

<td width="20%"> 

<div align="left"id="Div3" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)"> 
<a href="#">Delphi XX 图 书 </a><br> 

<a href="#">VB XX 图 书 </a><br> 

<a href="#">Java XX 图 书 </a></div> 

</td> 

<td width="20%"> 

<div align="|left"id="Div4" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)"> 
<a href="#"> 明 日 科技 主页 </a><br> 

<a href="#"> 明 日 科技 图 书 网 </a><br> 

<a href="#"> 明 日 技术 支持 网 </a></div> 

</td> 

</tr> 

</table> 


(3) 编写 用 于 实现 下 拉 菜 单 的 JavaScript 代码 。 
自 定义 函数 divControl0， 判 断 是 否 显示 相对 应 的 下 拉 列 表 。 代 码 如 下 所 示 。 


<script language="Javascript"> 
function divControl(show){ 
window.event.cancelBubble=true; 
var objlD=event.srcElement.id; 
var index=objlD.indexOf("_"); 
var mainlD=objID.substring(0,index); 
var numID=objID.substring(index+1); 
if(mainlD=="Tdiv"}{ 
if(show==1){eval("showdiv("+"Div"+numID+")");} 
else{eval("hidediv("+"Div"+numID+")");} 


} 
自 定义 函数 displayMenu0， 在 显示 下 拉 菜 单 时 ， 以 下 拉 方 式 显 示 下 拉 菜 单 。 代 码 如 下 所 示 。 


var nbottom=0,speed=2; 

function displayMenu(obj}{ 
obj.style.clip="rect(0 100% "+nbottom+"% 0)"; 
nbottom+=speed; 
if(nbottom<=100X{ 
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timerlD=setTimeout("displayMenu("+obj.id+"),1"); 


else clearTimeout(timerlD); 


| 
自 定义 函数 showdiv0， 显 示 下 拉 列 表 的 下 拉 选 项 。 代 码 如 下 所 示 。 


function showdiv(obj}{ 
obij.style.display="block"; 
obj.style.clip="rect(0 0 0 0)"; 
nbottom=5; 
displayMenu(obj); 


自 定义 函数 hidediv0， 隐 藏 下 拉 列 表 的 下 拉 选 项 。 代 码 如 下 所 示 。 
function hidediv(obj}{ 
nbottom=0; 


obj.style.display="none"; 


} 
function keepstyle(obj){ ”/W/ 在 下 拉 菜 单 中 移动 时 ， 保 持 下 拉 列 表 的 样式 
obij.style.display="block"; 


</script> 


8.6 小 结 


本 章 主 要 介绍 了 层 的 基本 概念 、<div> 标 签 、<div> 标 签 的 属性 、<span> 标 签 与 <div> 标 签 的 区 别 、 


<iframe> 标 签 ， 以 及 <layer> 标 签 和 <ilayer> 标 签 的 区 别 。 层 标记 可 以 看 作为 网 页 排版 的 标记 。 在 这 一 方 


面 它 与 表格 有 着 相似 的 功能 ， 但 层 能 够 完成 更 加 复杂 、 更 加 灵活 的 排版 效果 。 它 能 够 将 字 、 图 片 、 表 


格 等 多 种 元 素 组 成 一 个 区 域 进行 样式 的 统一 设置 。 熟 练 掌握 层 标记 对 网 页 的 布局 有 很 大 的 帮助 ， 希 望 
读者 能 够 认真 学 习 本 章 内 容 。 


选择 题 

1. 在 Dreamweaver 中 ， 下 面 关于 层 的 说 法 中 错误 的 是 〈 ) 
A. 层 可 以 被 准确 地 定位 于 网 页 的 任何 地 方 

B. 可 以 规定 层 的 大 小 

C. 层 与 层 可 以 有 重 倒 ， 但 是 不 可 以 改变 重 释 的 次 序 
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D. 可 以 动态 设 定 层 的 可 见 与 否 

2. 下 面 关 于 层 的 优 缺 点 的 说 法 错误 是 (  )。 
A. 下 和 Navigator 之 间 对 层 的 解释 存在 差异 ， 经 常会 发 生 层 的 位 置 偏 移 的 情况 
B. 旧版 本 的 浏览 器 和 一 些 非 主流 的 浏览 器 可 能 不 支持 层 


C. 使 用 层 可 以 制作 


H 很 多 意 想不到 的 效果 


D. 不 能 通过 时 间 线 来 实现 层 的 移动 


3. 下 面 不 可 以 建立 层 的 
A. <div> 标 签 
C. <ilayer> 标 签 


HTML 标签 的 是 〈 Ys 
B. <span> 标 签 
D. <table> 标 签 


4. 新 建 一 个 HTML 文档， 插入 一 个 层 ， 单 击 控制 柄 ， 在 层 的 周围 能 够 出 现 几 个 控制 柄 ? 〈(  ) 


4 不 


B. 6 个 C. 8 个 D: 


10 个 


5. 在 层 的 剪裁 时 ， 使 用 嵌 套 层 来 准确 定位 需要 剪裁 的 坐标 ， 记 下 嵌 套 层 属性 面板 中 的 L、T、W 
和 HH 的 值 分 别 为 50、43、23、14， 则 剪裁 的 坐标 L、T、R、B 为 ( je 


A. 50、43、73、57 
C. 73、 57、50、43 


填空 题 


B. 43、50、73、57 
D. 57、 73、50、43 


6. 可 以 将 层 转换 为 表格 ,表格 转换 为 层 。 


7 还 可 以 重合， 因此 可 以 利用 


在 网 页 中 实现 内 容 的 了 


8， 如 果 两 个 层 有 交叉 ， 则 两 层 的 关系 可 以 是 
9. 在 Dreamweaver 中 ， 的 值 越 大 ， 这 个 层 的 位 置 就 越 靠 上 。 


10. 默认 情况 下 ， 


是 使 用 最 普遍 的 层 标签 。 


E 合 效 果 。 


凯 
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( 铝 教学 录像 : 26 分 钟 ) 


表单 的 应 用 范围 非常 广泛 ， 其 功能 主要 是 收集 客户 提供 的 相关 信息 ， 使 网 页 具 
有 交互 的 功能 。 它 是 HTML 页 面 与 浏览 器 实现 交互 的 重要 手段 。 在 网 页 的 制作 过 
程 中 ， 尤 其 是 制作 动态 网 页 时 常常 需要 使 用 表单 ， 例 如 在 进行 用 户 注册 时 ， 就 必须 
通过 表单 填写 用 户 的 相关 信息 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 

NM 了 解 表单 标记 

吕 ”掌握 如 何 添加 控件 

MH ”掌握 如 何 添加 输入 类 的 控件 

| 熟悉 各 种 菜单 列表 类 的 控件 

MH” 掌握 文 本 域 标记 

吕 ”掌握 id 标记 


HIML 5 从 入 


门 到 精通 


9.1 使 用 表单 标签 一 一 form 


句 4 教学 录像 : 光盘 \TM\Ix\9\ 使 用 表单 标签 一 一 form.exe 


在 HTML 中 ， <form></form> 标 签 对 用 
之 间 的 一 切 都 属于 表单 的 内 容 。 
每 个 表单 元 素 


来 创建 一 个 表单 ， 即 定义 表单 的 开始 和 结束 位 置 ， 在 标签 对 


始 于 form 标签 , 可 以 包含 所 有 的 表单 控件 , 还 有 必需 的 伴随 数据 ,如 控件 的 标签 、 


处 理 数据 的 脚本 或 程序 的 位 置 等 。 在 表单 的 <form> 标 签 中 ， 还 可 以 设置 表单 的 基本 属性 ， 包 含 表 单 的 


名 称 、 处 理 程序 、 传 送 方法 等 。 一 般 情况 T 


参数 。 


9.1.1 


真正 处 理 表单 的 数据 脚本 或 程序 在 action 属性 里 


处 理 动作 一 一 action 


语法 
<form action=" 表 单 的 处 理 程序 "> 


</form> 
语法 解释 


在 该 语法 中 ， 表 单 的 处 理 程序 定义 的 是 表单 要 提交 的 地 址 ， 也 就 是 表单 中 收集 到 的 资料 将 要 传递 
的 程序 地 址 。 这 一 地 址 可 以 是 绝对 地 址 , 也 可 以 是 相对 地 址 , 还 可 以 是 一 些 其 他 的 地 址 形式 ， 如 E-mail 


地 址 等 。 


实例 代码 

<html> 

<head> 

<title> 设 定 表单 的 处 理 程序 </title> 
</head> 

<body> 


<!-- 这 是 一 个 没有 控件 的 表单 --> 
<form action="mailto:mingri@qq.com"> 
</form> 


</body> 
</html> 


以 电子 邮件 的 形式 发 送出 去 。 
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下 ， 表 单 的 处 理 程序 action 和 传送 方法 method 是 必 不 可 少 的 


， 这 个 值 可 以 是 程序 或 脚本 的 一 个 完整 URL。 


在 这 个 实例 中 ， 定 义 了 表单 提交 的 对 象 为 一 个 邮件 地 址 ， 当 程序 运行 后 会 将 表单 中 收集 到 的 内 容 


9.1.2 ”表单 名 称 
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name 
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名 称 属性 name 用 于 给 表单 命名 。 这 一 属性 不 是 表单 的 必需 属性 , 但 是 为 了 防止 表单 信息 在 提交 到 
后 台 处 理 程序 时 出 现 混乱 ， 一 般 要 设置 一 个 与 表单 功能 符合 的 名 称 ， 例 如 注册 页 面 的 表单 可 以 命名 为 
register。 不 同 的 表单 尽量 不 用 相同 的 名 称 ， 以 避免 混乱 。 


语法 


<form name=" 表 单 名 称 "> 


</form> 


语法 解释 


表单 名 称 中 不 能 包含 特殊 符号 和 空格 。 


实例 代码 


<html> 
<head> 


<title> 设 定 表单 的 名 称 </title> 


</head> 
<body> 


<!-- 这 是 一 个 没有 控件 的 表单 --> 
<form action="mailto:mingri@qq.com" name="register"> 


</form> 
</body> 
</html> 


在 该 实例 中 ， 将 表单 命名 为 register。 


9.1.3 ”传送 方法 一 一 method 


表单 的 method 属性 


语法 


来 定义 处 理 程序 从 表单 


什么 方法 发 送 到 服务 器 的 。 


<form ”method=" 传 送 方式 "> 


</form> 


语法 解释 


传送 方式 的 值 只 有 两 种 选择 ， 即 get 或 post。 


hb 获得 信息 的 方式 , 它 决定 了 表单 中 已 收集 的 数据 是 


其 中 ， 使 用 get 时 ， 表 单数 据 会 被 视 为 CGI 或 ASP 


的 参数 发 送 ， 也 就 是 来 访 者 输入 的 数据 会 附加 在 URL 之 后 ， 由 用 户 端 直接 发 送 至 服务 器 ， 所 以 速度 比 
post 快 ， 但 缺点 是 数据 长 度 不 能 太 长 ; 使 用 post 时 


， 表 单数 据 是 与 URL 分 开发 送 的 ， 客 户 端的 计算 机 
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会 通知 服务 器 来 读 取 数据 ， 所 以 通常 没有 数据 长 度 上 的 限制 ， 缺 点 是 速度 比 get 慢 。 默 认 值 为 get。 
实例 代码 


<html> 

<head> 

<title> 设 定 表单 的 传送 方式 </title> 

</head> 

<body> 
<!-- 这 是 一 个 没有 控件 的 表单 --> 
<form action="mailto:mingri@qq.com" name="register" method="post"> 
</form> 

</body> 

</html> 


在 这 个 实例 里 ， 表 单 register 的 内 容 将 会 以 post 的 方式 通过 电子 邮件 的 形式 传送 出 去 。 


9.1.4 ”编码 方 于 enctype 


表单 中 的 enctype 属性 用 于 设置 表单 信息 提交 的 编码 方式 。 
语法 


<form enctype=" 编 码 方式 "> 


</form> 
语法 解释 
enctype 的 取 值 如 表 9.1 所 示 。 


表 9.1 编码 方式 的 取 值 


以 纯 文本 的 形式 传送 
默认 的 编码 形式 
MIME 编码 ， 上 传 文件 的 表单 必须 选择 该 项 


text/plain 


application/x-www-form-urlencoded 


multipart/form-data 


实例 代码 


<html> 

<head> 

<title> 设 定 表单 的 编码 方式 </title> 

</head> 

<body> 
<!-- 这 是 一 个 没有 控件 的 表单 --> 
<form action="mailto:mingri@qq.com" name="register" method="post" enctype="text/plain"> 
</form> 
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</body> 
</html> 


在 这 个 实例 中 ， 设 置 了 表单 信息 以 纯 文本 的 编码 方式 发 送 。 


9.1.5 目标 显示 方式 


target 


target 属性 用 来 指定 目标 窗口 的 打开 方式 。 表单 的 目标 窗口 往往 用 来 显示 表单 的 返回 信息 ， 如 是 否 
成 功 提交 了 表单 的 内 容 、 是 否 出 错 等 。 


语法 
<form ”target=" 目 标 窗口 的 打开 方式 "> 


</form> 
语法 解释 


目标 窗口 的 打开 方式 包含 4 个 取 值 ，_blank、_parent、_self 和 _top。 其 中 _blank 是 指 将 返回 的 信息 
显示 在 新 打开 的 窗口 中 ; _parent 是 指 将 返回 信息 显示 在 父 级 的 浏览 器 窗口 中 ;，_self 则 表示 将 返回 信息 
显示 在 当前 浏览 器 窗口 ，_top 表示 将 返回 信息 显示 在 顶级 浏览 器 窗口 中 。 


实例 代码 


<html> 

<head> 

<title> 设 定 表单 的 显示 方式 </title> 

</head> 

<body> 
<!-- 这 是 一 个 没有 控件 的 表单 --> 
<form action="mailto:mingri@qq.com" name="register" method="post" enctype="text/plain" target="_self"> 
</form> 

</body> 

</html> 


在 这 个 实例 中 ， 设 置 表单 的 返回 信息 将 在 同一 窗口 中 显示 。 
以 上 所 讲解 的 只 是 表单 的 基本 构成 标签 ， 而 表单 的 <form> 标 签 只 有 和 它 所 包含 的 具体 控件 相 结合 
才能 真正 实现 表单 收集 信息 的 功能 。 下 面 就 对 表单 中 各 种 功能 的 控件 的 添加 方法 加 以 说 明 。 


9.2 添加 控件 


按照 控件 的 填写 方式 可 以 分 为 输入 类 和 菜单 列表 类 。 输入 类 的 控件 一 般 以 input 标签 开始 ， 说 明 这 
控件 需要 用 户 的 输入 ; 而 菜单 列表 类 则 以 select 标签 开始 ， 表 示 用 户 需 要 选择 。 按 照 控件 的 表现 形 
式 则 可 以 将 控件 分 为 文本 类 、 选 项 按钮 和 菜单 等 。 
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在 HTML 表单 中 , input 标签 是 最 常用 的 控件 标签 , 包括 最 常见 的 文本 域 、 按钮 都 是 采用 这 个 标签 ， 
这 个 标签 的 基本 语法 是 : 


<form> 


<input name=" 控 件 名 称 " type=" 控 件 类 型 " /> 


</form> 


在 这 里 ， 控 件 名 称 是 为 了 便于 程序 对 不 同 控件 的 区 分 ， 而 type 参数 则 是 确定 了 这 一 个 控件 域 的 类 
型 。 在 HTML 中 ，input 参数 所 包含 的 控件 类 型 如 表 9.2 所 示 。 


表 9.2 输入 类 控件 的 type 取 值 


type 取 值 含义 

text 文字 字段 

password 密码 域 ， 用 户 在 页 面 中 输入 时 不 显示 具体 的 内 容 ， 都 以 “*” 代 葵 
radio 单 选 按钮 

checkbox 复 选 框 

button 普通 按钮 

submit 提交 按钮 

reset 重 置 按钮 

image 图 形 域 ， 也 称 为 图 像 提交 按钮 

hidden 隐藏 域 ， 其 并 不 显示 在 页 面 上 ， 只 将 内 容 传递 到 服务 器 中 
file 文件 域 


除了 输入 类 型 的 控件 之 外 ， 还 有 一 些 控 件 ， 如 文字 区 域 、 菜 单列 表 则 不 是 用 input 标记 的 。 它 们 有 
自己 的 特定 标记 ， 如 文字 区 域 直 接 使 用 textarea 标记 ,菜单 标记 需要 使 用 select 和 option 标记 结合 ，i 
些 内 容 将 在 后 面 做 详细 介绍 。 


9.3 输入 类 的 控件 
锅 d 教学 录像 : 光盘 \TM\Ix\9\ 输 入 类 的 控件 .exe 


9.3.1 文字 字段 一 一 text 


text 属性 值 用 来 设 定 在 表单 的 文本 域 中 输入 任何 类 型 的 文本 、 数 字 或 字母 。 输 入 的 内 容 以 单行 显示 。 

语法 

<input type="text" name=" 控 件 名 称 " size=" 控 件 的 长 度 " maxlength=" 最 长 字符 数 " value=" 文 字 字 段 的 默认 取 值 "> 

语法 解释 

该 语法 包含 了 很 多 参数 , 它们 的 含义 和 取 值 方法 并 不 相同 ,如 表 9.3 所 示 。 其 中 name、size、maxlength 
参数 一 般 是 不 会 省 略 的 参数 。 
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表 9.3 text 文字 字段 的 参数 表 


参数 含义 
文字 字段 的 名 称 ， 用 于 和 页 面 中 其 他 控件 加 以 区 别 ， 命 名 时 不 能 包含 特殊 字符 ， 也 不 能 

人 以 HTML 预 留 作为 名 称 
size 定义 文本 框 在 页 面 中 显示 的 长 度 ， 以 字符 作为 单位 
maxlen! 定义 在 文本 框 中 最 多 可 以 输入 的 字符 数 
Value 定义 文本 框 中 的 默认 值 

例 9.1 实例 代码 〈 实 例 位 置 : 光盘 \TM\sN9\1) 

<html> 

<head> 

<title> 设 定 表单 的 名 称 </title> 

</head> 

<body> 

<h1> 用 户 调整 </h1> 


<form action="mailto: mingri@qq.com" method="get" name="register"> 
姓名 : <input type="text" name="username'" size="20" /> 
<br/><br/> 
网 址 : <input type="text" name="URL" size="20" maxlength="50" value="http://" /> 
</form> 
</body> 
</html> 


表单 的 名 称 为 register， 将 表单 内 容 以 电子 邮件 的 方式 传递 ， 并 使 用 get 传输 方式 。 设 定 两 个 文本 
框 ; 第 一 个 “姓名 ”的 文本 框 为 20 字符 宽度 ， 第 二 个 “网 址 ”的 文本 框 为 20 字符 宽度 ， 但 最 大 可 以 
输入 50 个 字符 ， 并 且 显示 http:// 的 初始 值 。 如 图 9.1 所 示 就 是 文字 域 的 显示 结果 。 


- 
F LT rreee 


用 户 调 整 


图 9.1 在 页 面 中 添加 文字 字段 


9.3.2 ”密码 域 


password 


在 表单 中 还 有 一 种 文本 域 的 形式 一 一 密码 域 ， 输 入 到 该 文本 域 中 的 文字 均 以 “* ”或 圆 点 显示 。 
语法 


<input type="password" name=" 控 件 名 称 " size=" 控 件 的 长 度 " maxlength=" 最 长 字符 数 " value=" 文 字 字段 的 默认 
取 值 " /> 


语法 解释 
该 语法 包含 了 很 多 参数 ， 它 们 的 含义 和 取 值 如 表 9.4 所 示 。 其 中 name、size、maxlength 参数 是 必 选 。 
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表 9.4 password 密码 域 的 参数 表 


参数 含义 

域 的 名 称 , 用 于 和 页 面 中 其 他 控件 加 以 区 别 , 命名 时 不 能 包含 特殊 字符 , 也 不 能 以 HTML 
预 留 字 作 为 名 称 

size 定义 密码 与 的 文本 框 在 页 面 中 显示 的 长 度 ， 以 字符 作为 单位 

maxlength 定义 在 输入 密码 的 文本 框 中 最 多 可 以 输入 的 字符 数 

value 定义 密码 域 的 默认 值 ， 同 样 以 “* ”显示 


例 9.2 ”实例 代码 〈 实 例 位 置 : 光盘 \TM\sN92) 


<html> 
<head> 
<title> 插 入 密码 域 </title> 
</head> 
<body> 
<h1> 用 户 调查 </h1> 
<form action="mailto: mingri@qq.com" method="get" name="register"> 
姓名 : <input type="text" name="Username" size="20" /> 
<br/><br/> 
密码 : <input type="password" name="password" size="20" maxlength="8" /> 
<br/><br/> 
确认 密码 : <input type="password" name="qupassword" size="20" maxlength="8" /> 
</form> 
</body> 
</html> 


运行 这 段 代 码 ， 在 页 面 中 的 密码 文本 域 中 输入 密码 ， 可 以 看 到 出 现在 文本 框 中 的 内 容 不 是 字符 本 


身 ， 而 是 “*”， 如 图 9.2 所 示 。 
区 ee DMVV-lL hml DP» OX ee 


用 户 调 查 


姓名 ， 字 小 米 


图 9.2 在 密码 域 中 输入 字符 
9.3.3 ” 单 选 按钮 一 一 radio 


单 选 按钮 能 够 进行 项 目的 单项 选择 ， 以 一 个 圆 框 表示 。 
语法 
<inputtype="radio" value=" 单 选 按钮 的 取 值 " name=" 单 选 按钮 名 称 " checked="checked"/> 
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语法 解释 


在 该 语法 中 ，checked 属性 表示 这 一 单 选 按钮 默认 被 选中 ， 而 在 一 个 单 选 按钮 组 中 只 能 有 一 项 单 选 
按钮 控件 设置 为 checked。value 用 来 设置 用 户 选中 该 项 目 后 ， 传 送 到 处 理 程 序 中 的 值 。 
例 9.3 实例 代码 (实例 位 置 光盘 \TMN\sN93) 


<html> 
<head> 
<title> 在 表单 中 添加 单 选 按钮 </title> 
</head> 
<body> 
<h2> 心 理 小 测试 : 测试 你 的 心智 </h2> 
<hr> 
在 冬日 的 下 午 ， 你 一 个 人 在 散步 ， 这 时 你 最 希望 看 到 什么 景色 ? 
<hr/> 
<form action="" name="xlcs" method="post"> 
<input type="radio" value="answerA" name="test"/> 在 沙滩 上 了 晒 太阳 的 螃蟹 
<br/> 
<input type="radio" value="answerB" name="test"/> 风 中 摇 钨 的 红 枫 
<br/> 
<input type="radio" value="answerC" name="test"/> 美 丽 善良 的 采 茶 姑娘 
<br/> 
<input type="radio" value="answerD" name="test"/> 在 空中 飞行 的 一 对 黑 稚 
</form> 
</body> 
</html> 


运行 这 段 程序 ， 可 以 看 到 在 页 面 中 包含 了 4 个 单 选 按钮 ， 如 图 9.3 所 示 。 


雹 和 FE) 百 在 尿 下 夫人 | 工具。 害 肌 |H) 
心理 小 测试 : 测试 你 的 心智 


在 冬日 的 下 午 ， 你 一 个 人 在 散步 ， 这 时 你 最 希望 看 到 什么 景色 ? 


在 沙滩 上 上 晒 太 阳 的 崇 基 
风 中 括 碟 的 : 


美丽 善良 的 采 茶 丰 娘 
在 空中 飞行 的 一 对 黑 鹤 


图 9.3 添加 单 选 按钮 
9.3.4” 复 选 框 一 一 checkbox 


在 网 页 设计 中 ， 有 一 些 内 容 需 要 让 浏览 者 以 选择 的 形式 填写 ， 而 选择 的 内 容 可 以 是 一 个 ， 也 可 以 
是 多 个 ， 这 时 就 需要 使 用 复 选 框 控 件 checkbox。 复 选 框 在 页 面 中 以 一 个 方 框 来 表示 。 
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语法 

<input type="checkbox" value=" 复 选 框 的 值 " name=" 名 称 " checked="checked" /> 

语法 解释 

在 该 语法 中 ，checkbox 参数 表示 该 选项 在 默认 情况 下 已 经 被 选中 ， 一 个 选择 中 可 以 有 多 个 复 选 框 
被 选中 。 

例 9.4 实例 代码 (实例 位 置 :光盘 \TMN\sN\94) 


<html> 

<head> 

<title> 在 表单 中 添加 复 选 框 </title> 

</head> 

<body> 

<form action="" name="fxk" method="post"> 
<h4>Question: 测验 :以 下 几 种 方便 面 你 最 喜欢 哪 种 ?</h4> 
<input type="checkbox" value="A1" name="test"/> 鲜 虾 鱼 板 面 
<input type="checkbox" value="A2" name="test"/> 红 烧 牛 肉 面 
<input type="checkbox" value="A3" name="test"/> 香 菇 炖 鸡 面 
<input type="checkbox" value="A4" name="test"/> 梅 菜 扣 肉 面 
<input type="checkbox" value="A5" name="test"/> 番 茄 牛肉 面 
<input type="checkbox" value="A6" name="test"/> 红 烧 排骨 面 

</form> 

</body> 

</html> 


运行 这 段 代 码 ， 效 果 如 图 9.4 所 示 。 


[A] 国 FApp Sor ham Pp-ex Gt. le 
文件 (P) 顽 贺 (E] 查看 V) 收藏 夫 (A) 工具 T) 帮助 (H 


Question: 测验 :以 下 几 种 方便 面 你 最 喜欢 哪 种 ? 
回 鲜 是 鱼 板 面 回 红烧 牛肉 面 团 香 攻 灶 x 面 回 梅 荣 扣 肉 面 回音 茄 牛 内 面 回 红烧 排骨 面 


图 9.4 添加 复 选 框 的 效果 
9.3.5 ”普通 按钮 一 一 button 


在 网 页 中 按钮 也 很 常见 ， 在 提交 页 面 、 恢 复 选 项 时 常常 需要 用 到 按钮 。 普 通 按 钮 一 般 情况 下 需要 
配合 脚本 来 进行 表单 处 理 。 

语法 

<input type="button" value=" 按 钮 的 取 值 " name=" 按 钮 名 " onclick=" 处 理 程序 "/> 

语法 解释 

value 参数 的 取 值 就 是 显示 在 按钮 上 面 的 文字 ， 而 在 button 参数 中 可 以 通过 添加 onclick 参数 来 实 
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现 一 些 特殊 的 功能 ，onclick 参数 是 设置 当 用 鼠标 单 击 按钮 时 所 进行 的 处 理 。 
例 9.5 实例 代码 (实例 位 置 : 光盘 \TMNsl9\S) 


<html> 

<head> 

<title> 在 表单 中 添加 普通 按钮 </title> 
</head> 

<bod 


y> 
下 面 是 几 个 有 不 同 功能 的 按钮 : <br/><br/> 
<form name="ptan" action="" method="post"> 
<!- 在 页 面 中 添加 一 个 普通 按钮 -> 
<input type="button" value=" 普 通 按钮 " name="button1" /> 
<!- 在 页 面 中 添加 一 个 关闭 当前 窗口 -> 
<input type="button" value=" 关 闭 当前 窗口 " name="close" onclick="window.close()"/> 
<!- 在 页 面 中 添加 一 个 打开 新 窗口 的 按钮 -> 
<input type="button" value=" 打 开 窗 口 " name="opennew" onclick="window.open()" /> 
</form> 
</body> 
</html> 


运行 这 段 代码 ， 单 击 页 面 中 的 “普通 按钮 ”按钮 ， 页 面 不 会 有 任何 变化 ， 因 为 在 “普通 按钮 ” 按 
钮 的 代码 中 没有 设置 处 理 程序 ， 如 果 单 击 “ 关 闭 当前 窗口 ”按钮 ， 会 弹出 一 个 关闭 警告 的 窗口 ， 如 
图 9.5 所 示 ， 单 击 警告 窗口 中 的 “是 ”按钮 ， 则 会 成 功 关 闭 当前 窗口 ， 否 则 返回 ， 单 击 页 面 中 的 “打开 
窗口 ”按钮 ， 则 会 弹出 一 个 新 的 窗口 ， 如 图 9.6 所 示 。 


a 


下 面 是 几 个 有 不 同 功能 的 按 相 : 


| | 


图 9.5 关闭 警告 窗口 图 9.6 打开 新 的 窗口 
9.3.6 ”提交 按钮 一 一 submit 


提交 按钮 是 一 种 特殊 的 按钮 ， 不 需要 设置 onclick 参数 ， 在 单 击 该 类 按钮 时 可 以 实现 表单 内 容 的 提交 。 
语法 

<input type="submit" name=" 按 钮 名 " value=" 按 钮 的 取 值 " /> 

语法 解释 

在 该 语法 中 ，value 用 于 设置 按钮 上 显示 的 文字 。 
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例 9.6 实例 代码 (实例 位 置 : 光盘 \TM\sIN\9\6) 


<html> 
<head> 
<title> 在 表单 中 添加 提交 按钮 </title> 
</head> 
<body> 
<form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest" enctype="text/plain"> 
姓名 : <input type="text" name="username" size="20" /><br /><br/> 
网 址 : <input type="text" name="URL" size="20" maxlength="50" value="http://" /><br/><br/> 
密码 : <input type="password" name="password" size="20" maxlength="8" /><br /><br/> 
确认 密码 : <input type="password" name="qurpassword" size="20" maxlength="8" /><br/><br/> 
请 选择 你 喜欢 的 音乐 : 
<input type="checkbox" name="m1" value="rock"/> 摇 滚 乐 
<input type="checkbox" name="m2" value="jazz"/> 喜 士 乐 
<input type="checkbox" name="m3" value="pop"/> 流 行乐 <br/><br/> 
请 选择 你 居住 的 城市 : 
<input type="radio" name="city" value="beijing"/> 北 京 
<input type="radio" name="city" value="shanghai"/> 上 海 
<input type="radio" name="Ccity" value="nanjing"/> 南 京 <br/><br/> 
<input type="submit" name="submit" value=" 提 交 表 单 " /> 
</form> 
</body> 
</html> 


如 图 9.7 所 示 就 是 提交 按钮 的 显示 结果 
单 击 “ 提 交 表单 ”按钮 后 ， 由 于 表单 设 定 的 以 电子 邮件 方式 提交 ， 因 此 会 弹出 如 图 9.8 所 示 的 对 话 
i 


出 


EEC 7 Er eH) 


姓名 ， 
网 址 ，R 也 Wndows interet Erplorer 
密码 ， 
该 表 羊 以 电子 邮件 形式 提交 
确认 密码 ， 理 交 流 委 会 将 次 的 下 子 部 件 地 址 时 寺 络 收 件 人 
并 县 在 不 进行 加 密约 情况 下 发 闫 表单 数据 。 
请 选择 你 喜欢 的 音乐 ， 加 控 滚 乐 四 覆 士 乐 站 六 行乐 i 
请 选择 你 居住 的 城市 。 所 北京 上 海 南京 
a Em 
图 9.7 添加 提交 按钮 的 效果 图 9.8 电子 邮件 提交 


9.3.7 ” 重 置 按钮 一 一 reset 
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单 寺 
语法 
<input type="reset" name=" 按 钮 名 " value=" 按 钮 的 取 值 " /> 


E 置 按钮 后 ， 可 以 清除 表单 的 内 容 ， 恢 复 默 认 的 表单 内 容 设 定 。 


上 


第 9 章 编辑 表单 
语法 解释 
在 该 语法 中 ，value 同样 用 来 设置 按钮 上 显示 的 文字 。 
实例 代码 


<html> 
<head> 
<title> 在 表单 中 添加 重 置 按钮 </title> 
</head> 
<body> 
<form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest" enctype="text/plain"> 
姓名 : <input type="text" name="username" size="20" /><br /><br/> 
网 址 : <input type="text" name="URL" size="20" maxlength="50" value="http://" /><br/><br/> 
密码 : <input type="password" name="password" size="20" maxlength="8" /><br /><br/> 
确认 密码 : <input type="password" name="qurpassword" size="20" maxlength="8" /><br/><br/> 
请 选择 你 喜欢 的 音乐 : 
<input type="checkbox" name="m1" value="rock"/> 摇 滚 乐 
<input type="checkbox" name="m2" val azz"/> 事 士 乐 
<input type="checkbox" name="m3" value="pop"/> 流 行乐 <br/><br/> 
请 选择 你 居住 的 城市 : 
<input type="radio" name="city" value="beijing"/> 北 京 
<input type="radio" name="city" value="shanghai"/> 上 海 
<input type="radio" name="city" value="nanjing"/> 南 京 <br/><br/> 
<input type="submit" name="submit" value=" 提 交 表 单 " /> 
<input type="reset" name="cx" value=" 重 置 按钮 "/> 
</form> 
</body> 
</html> 


运行 这 段 代 码 ， 重 置 按钮 的 显示 结果 如 图 9.9 所 示 。 


姓名 ， 


网 址 ， ht 

密码 : 

确认 容 码 ， 

请 近 择 你 喜欢 的 音乐 ， 目 手 彼 乐 目 医 士 乐 习 流 行乐 
请 选择 你 拓 住 的 城市 ， 会 北京 上 海 自 南京 


EE 


图 9.9 添加 重 置 按钮 的 效果 


9.3.8 图像 域 


image 


如 果 网 页 使 用 了 较为 丰富 的 色彩 ， 或 复杂 一 些 的 设计 ， 再 使 用 表单 默认 的 按钮 形式 就 会 破坏 整体 
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的 美感 ， 会 让 人 觉得 单调 。 这 时 可 以 使 用 图 像 域 创建 与 网 页 整体 效果 相 统一 的 
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是 指 可 以 用 在 提交 按钮 位 置 上 的 图 片 ， 这 幅 图 片 具有 按钮 的 功能 。 
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语法 


<input type="image" src=" 图 像 地 址 " name=" 图 像 域名 称 " /> 


语法 解释 
在 该 语法 中 ， 


图 


像 地 址 既 可 以 是 绝对 地 址 也 可 以 是 相对 地 址 。 


例 9.7 实例 代码 (实例 位 置 :光盘 \TM\sN9\7) 


<html> 
<head> 


<title> 在 表单 中 添加 图 像 提交 按钮 </title> 


</head> 
<body> 


图 像 提交 按钮 。 


网 


像 域 


<form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest" enctype="text/plain"> 
姓名 : <input type="text" name="username'" size="20"/><br/><br/> 
网 址 : <input type="text" name="URL" size="20" maxlength="50" value="http://"/><br/><br/> 
密码 : <input type="password" name="password" size="20" maxlength="8" /><br/><br/> 

确认 密码 : <input type="password" name="qurpassword" size="20" maxlength="8"/><br/><br/> 
请 选择 你 喜欢 的 音乐 : 

<input type="checkbox" name="m1" value="rock"/> 摇 滚 乐 

<input type="checkbox" name="m2" value="jazz"/> 事 士 乐 

<input type="checkbox" name="m3" value="pop"/> 流 行乐 <br/><br/> 
请 选择 你 居住 的 城市 : 

<input type="radio" name="city" value="beijing"/> 北 京 

<input type="radio" name="city" value="shanghai"/> 上 海 

<input type="radio" name="city" value="nanjing"/> 南 京 <br/><br/> 
<input type="image" src="images/11.png" name="image1" /> 

<input type="image" src="images/22.png" name="image2" /> 


</form> 
</body> 
</html> 


运行 这 段 代 码 ， 图 像 提交 按钮 的 显示 结果 如 图 9.10 所 示 。 


JAN 一 

[NG 司 Fwppsevwwwv D » OX | © Eseries 
KH WE EV WA IAM wo) 

姓名 : 


网 址 ，hep7 
Es 

确认 罕 三: 

请 失 择 你 喜欢 的 音乐 目 播 滚 乐 四 爵士 乐 回流 行乐 
请 选择 你 居住 的 城市 日 北京 日 上 海 台南 京 


B® _ 


图 9.10 添加 图 像 提交 按钮 的 效果 


9.3.9 
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隐藏 域 一 一 hidden 


表单 中 的 隐藏 域 主要 用 来 传递 一 些 参 数 ， 而 这 些 参数 不 需要 在 页 面 中 显示 。 当 用 户 提交 表单 时 
隐藏 域 的 内 容 会 一 起 提交 给 处 理 程序 。 

语法 

<input type="hidden" name=" 隐 藏 域名 称 " value=" 提 交 的 值 " /> 

实例 代码 


<html> 

<head> 
<title> 添 加 隐藏 域 </title> 
</head> 

<body> 


<form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest" enctype="text/plain"> 
姓名 : <input type="text" name="username'" size="20" /><br/><br/> 

网 址 : <input type="text" name="URL" size="20" maxlength="50" value="http://"/><br/><br/> 
密码 : <input type="password" name="password" size="20" maxlength="8" /><br/><br/> 

确认 密码 : <input type="password" name="qurpassword" size="20" maxlength="8" /><br/><br/> 
请 选择 你 喜欢 的 音乐 : 

<input type="checkbox" name="m1" value="rock"/> 摇 滚 乐 

<input type="checkbox" name="m2" value="jazz"/> 喜 士 乐 

<input type="checkbox" name="m3" value="pop"/> 流 行乐 <br/><br/> 

请 选择 你 居住 的 城市 : 

<input type="radio" name="city" value="beijing"/> 北 京 

<input type="radio" name="city" value="shanghai"/> 上 海 

<input type="radio" name="city" value="nanjing"/> 南 京 <br/><br/> 

<input type="image" src="images/11.png" name="image1" /> 

<input type="image" src="images/22.png" name="image2" /> 

<input type="hidden" name="from" value="invest /> 

</form> 


</body> 


</ht 


ml> 


运行 这 段 代码 , 隐藏 域 的 内 容 并 不 能 显示 在 页 面 中 , 但 是 在 提交 表单 时 , 其 名 称 from 和 取 值 invest 
将 会 同时 传递 给 处 理 程序 。 


9.3.10 “文件 域 一 一 file 


文件 域 在 上 传 文件 时 常常 用 到 ， 它 用 于 查找 硬盘 中 的 文件 路 径 ， 然 后 通过 表单 将 选中 的 文件 上 传 。 


在 发 送 日 


电子 邮件 、 上 传 头像 、 传 送 文 件 时 常常 会 看 到 这 一 控件 。 
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语法 
<input type="file" name=" 文 件 域 的 名 称 " /> 
例 9.8 实例 代码 (实例 位 置 光盘 \TM\sI\9\8》 


<html> 
<head> 
<title> 在 表单 中 添加 文件 域 </title> 
</head> 
<body> 
<form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest" enctype="text/plain"> 
姓名 : <input type="text" name="username" size="20" /><br/><br/> 
网 址 : <input type="text" name="URL" size="20" maxlength="50" value="http://"/><br/><br/> 
密码 : <input type="password" name="password" size="20" maxlength="8" /><br/><br/> 
确认 密码 : <input type="password" name="qurpassword" size="20" maxlength="8" /><br/><br/> 
请 上 传 你 的 照片 : <input type="file" name="file" /><br/><br/> 
请 选择 你 喜欢 的 音乐 : 
<input type="checkbox" name="m1" value="rock"/> 摇 滚 乐 
<input type="checkbox" name="m2" value="jazz"/> 栈 士 乐 
<input type="checkbox" name="m3" value="pop"/> 流 行乐 <br/><br/> 
请 选择 你 居住 的 城市 : 
<input type="radio" name="city" value="beijing"/> 北 京 
<input type="radio" name="city" value="shanghai"/> 上 海 
<input type="radio" name="city" value="nanjing"/> 南 京 <br/><br/> 
<input type="image" src="images/11.png" name="image1" /> 
<input type="image" src="images/22.png" name="image2" /> 
</form> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 页 面 中 添加 了 一 个 “浏览 ”按钮 ， 单 击 该 按钮 就 会 打开 “选择 要 加 载 的 
文件 ”对 话 框 ， 如 图 9.11 所 示 。 


Pp IDE 
[Owain 
姓名 ， 
网 址 ，bttp; 
窗 码 ， 
| 确认 密码 
| 请 上 传人 的 归 片 Em 


请 选择 你 喜欢 的 音乐 可 毛 深 乐 目 羡 士 冰 
请 选择 你 居住 的 城市 ， 日 北京 全 上 海 日 南京 


图 9.11 添加 文件 域 
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9.4 列表 /菜单 标记 


菜单 列表 类 的 控件 主要 用 来 选择 给 定 答案 中 的 一 种 ， 这 类 选择 往往 答案 比较 多 ， 使 用 单 选 按钮 比 
较 浪费 空间 。 可 以 说 ， 菜 单列 表 类 的 控件 主要 是 为 了 节省 页 面 空间 而 设计 的 。 列 表 和 菜单 都 是 通过 
<select> 和 <option> 标 记 来 实现 的 。 

语法 

<select name=" 下 拉 菜 单 的 名 称 "> 


<option value=" selected="selected"> 选 项 显示 内 容 </option> 
<option value=" 选 项 值 "> 选项 显示 内 容 </option> 


</select> 
语法 解释 
这 些 属性 的 含义 如 表 9.5 所 示 。 
表 9.5 列表 和 菜单 标记 属性 


菜单 和 列表 标记 属性 描述 
Name 菜单 和 列表 的 名 称 
Size 显示 的 选项 数目 
Multiple 列表 中 的 项 目 多 选 
Value 选项 值 
Selected 默认 选项 


例 9.9 实例 代码 (实例 位 置 ， 光盘 \TMN\sN\9\9) 


<html> 
<head> 
<title> 菜 单 的 插入 </title> 
</head> 
<body> 
<h3> 兴 趣 调 查 </h3> 
<form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest"> 
请 选择 你 喜欢 的 音乐 : <br/><br/> 
<select name="music" size="5" multiple="multiple"> 
<option value="rock" selected="selected"> 摇 滚 乐 </option> 
<option value="pop"> 流 行乐 </option> 
<option value="jazz"> 栈 士 乐 </option> 
<option value="folk"> 民 族 乐 </option> 
<option value="dj"> 打 击 乐 </option> 
</select> 
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<br/><br/> 
<select name="Ccity"> 
<option value="beijing" selected="selected"> 北 京 
<option value="shanghai" > 上 海 
<option value="nangjing"> 南 京 
<option value="changchun"> 长 春 
</select> 
<input type="submit" name="submit" value=" 提 交 表 单 " /> 


</form> 

</body> 

</html> 

运行 这 段 代 码 ， 可 以 看 到 页 面 中 添加 了 包含 5 个 选项 的 下 拉 菜 单 ， 其 中 “摇滚 乐 ”选项 被 设置 为 
默认 ; 在 页 面 定 义 了 默认 的 菜单 数量 ， 其 中 “北京 ”为 默认 选项 。 图 9.12 所 示 的 就 是 列表 和 菜单 的 
效果 。 


图 9.12 添加 列表 和 菜单 


9.5 文本 域 标记 一 一 textarea 


除了 以 上 讲解 的 两 大 类 控件 外 ， 还 有 一 种 特殊 定义 的 文本 样式 ， 称 为 文字 域 或 文本 域 。 与 文字 字 


段 ， 它 可 以 添加 多 行文 字 ， 从 而 可 以 输入 更 多 的 文本 。 这 类 控件 在 一 些 留言 本 中 最 为 常见 。 
语法 
<textarea name=" 文 本 域名 称 " value=" 文 本 域 默 认 值 " rows=" 行 数 " cols=" 列 数 "> 
</textarea> 
语法 解释 


语法 中 各 属性 的 含义 如 表 9.6 所 示 
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表 9.6 文本 标记 属性 的 含义 


属 性 含义 
name 文本 域 的 名 称 
TOWs 文本 域 的 行 数 
cols 文本 域 的 列 数 
value 文本 域 的 默认 值 

例 9.10 ”实例 代码 〈 实 例 位置 : 光盘 \TMNsI\9\10) 

<html> 

<head> 

<title> 添 加 文本 域 </title> 

</head> 

<body> 


用 户 调查 留言 : <br/><br/> 
<form action="mailto:mingrisoft@mingrisoft.com" name="invest" method="post"> 
用 户 名 : <input name="username" type="text" size="20"/><br/><br/> 

密码 : <input name="password" type="password" size="20"/><br/><br/> 
留言 : <textarea name="liuyan” rows="5" cols="40"><br/><br/> 
</textarea> 

</form> 

</body> 

</html> 


运行 这 段 代 码 ， 可 以 看 到 页 面 上 添加 了 一 个 行 数 为 5、 列 数 为 40 的 文本 域 ， 如 图 9.13 所 示 。 


3 | 
Oo rrr Er 


用 户 调查 留言 ， 
用 户 名 ， 小 米 


密码， e000000 


希望 尽快 解决 论坛 问题 * 


了 梧 


四 


图 9.13 ”添加 文本 域 的 效果 


9.6 id 标记 


在 HTML 的 表单 元 素 中 ,还 有 一 个 id 标记 。 这 一 标记 是 一 个 较为 特殊 的 标记 ， 它 主要 用 于 标记 
个 唯一 的 元 素 。 这 个 元 素 可 以 是 文字 字段 、 密 码 域 、 其 他 的 表单 元 素 ， 甚 至 也 可 以 定义 一 幅 图 像 、 一 


个 表格 。 但 是 在 实际 应 用 中 ， 表 单 是 使 用 id 标记 最 多 的 一 类 元 素 。 
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语法 
<id=" 元 素 的 标识 名 "> 
语法 解释 
在 HTML 中 , 由 于 id 用 来 标记 页 面 的 唯一 元 素 , 因此 在 定义 标记 名 时 最 好 要 根据 其 含义 进行 命名 。 
实例 代码 
<html> 
<head> 
<title> 定 义 标记 名 </title> 
</head> 
<body> 
用 户 调查 留言 : <br/><br/> 
<form action="mailto:mingrisoft@mingrisoft.com" name="invest" method="post"> 
用 户 名 : <input name="username" type="text" size="20" id="username" /><br/><br/> 
密码 : <input name="password" type="password" size="20" /><br/><br/> 
留言 : <textarea name="liuyan"” rows="5" cols="40"> 
</textarea><br/><br/> 
<input type="submit" name="submit" value=" 提 交 " /> 
</form> 


</body> 
</html> 


在 该 实例 中 ， 定 义 了 用 户 名 的 文字 字段 id 为 username。 而 在 运行 程序 时 ， 页 面 中 并 不 显示 该 id 


只 是 在 将 信息 传送 到 服务 器 时 会 同时 被 提交 。 


9.7 小 结 


本 章 主要 介绍 了 表单 标记 、 添 加 控件 、 输 入 类 的 控件 、 列 表 / 菜 单 标记 、 文 本 域 标记 以 及 id 标记 。 


通过 本 章 的 详细 介绍 ， 能 使 读者 更 好 地 运用 表单 制作 网 页 。 表 单 是 实现 动态 网 页 的 一 种 主要 的 外 在 形 


式 ， 
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表单 网 页 的 制作 最 终 还 是 要 由 表格 组 织 起 来 ， 所 以 读者 还 是 要 熟练 掌握 表格 的 制作 。 


9.8 习 题 


选择 题 
1. 如 果 要 将 表单 提交 的 信息 不 以 附件 的 形式 发 送 ， 只 需 将 表单 的 “MIME 类 型 ”设置 为 (  ) 。 
A. text/plain B. password C. submit D. button 


2. 若 要 获得 名 为 login 的 表单 中 名 为 txtuser 的 文本 输入 框 中 的 值 ， 以 下 获取 的 方法 中 ， 正 确 的 是 
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( b 
A. username=login.txtuser.value B. username=document.txtuser.value 
C. username=document.login.txtuser D. username=document.txtuser.values 
3. 若 要 产生 一 个 4 行 30 列 的 多 行文 本 域 ， 以 下 方法 中 ， 正 确 的 是 (  )。 
A. <input type='"text" rows="4" cols="30" name="txtintrol"> 
B. <textarea rows="4" cols="30" name="txtintro"> 
C. <textarea rows="4" cols="30" name="txtintro"></textarea> 
D. <textarea rows="30" cols="4" name="txtintro"></textarea> 


判断 题 

4. 当 用 户 填写 完 信息 后 单 击 普通 按钮 做 提交 操作 。 ( 。 ) 

5. method 属性 用 来 定义 处 理 程序 从 表单 中 获得 信息 的 方式 ， 可取 值 为 get 或 post 中 的 一 个 。 其 中 
post 方式 传送 的 数据 量 比较 小 。 (。 ) 

6. <input type="text" value="username"> 中 的 value 属性 是 指 表 单 提交 后 将 传送 到 服务 器 的 值 。 ) 


填空 题 


7. 表单 对 象 的 名 称 由 属性 设 定 ; 提交 方法 由 属性 指定 ; 若 要 提交 数据 量 很 大 的 
数据 ， 则 应 采用 方法 ; 表单 提交 后 的 数据 处 理 程序 由 属性 指定 。 

8. 表单 是 Web 和 Web 之 间 实 现 信息 交流 和 传递 的 桥梁 。 

9. 表单 实际 上 包含 两 个 重要 的 组 成 部 分 : 一 是 用 于 描述 表单 信息 的 ; 二 是 用 于 处 理 表单 
数据 的 服务 器 端 ” ___。 
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多 媒体 页 面 


( 她 教学 录像 : 18 分 钟 ) 


多 媒体 元 素 对 于 一 个 网 站 来 说 是 必 不 可 少 的 ， 使 用 它 可 以 丰富 网 站 的 视听 效 
果 ， 体 现 设计 者 的 个 性 ， 吸 引用 户 的 注意 力 ， 突 出 重点 。 通 常 多 媒体 元 素 包 括 声音 
和 动画 两 部 分 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 

让 了 解 滚动 文字 的 标记 和 属性 

H ”掌握 如 何 添加 背景 音乐 

WI 掌握 如 何 添加 多 媒体 文件 
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10.1 设置 滚动 文字 


合 m 教学 录像 : 光盘 \TMNIX10\ 设 置 滚动 文字 .exe 
网 页 的 多 媒体 元 素 一 般 包括 动态 文字 、 动 态 图 像 、 声 音 以 及 动画 等 ， 其 中 最 简单 的 就 是 添加 一 些 
滚动 文字 。 


10.1.1 滚动 文字 标签 


marquee 


使 用 marquee 标签 可 以 将 文字 设置 为 动态 滚动 的 效果 。 

语法 

<marquee> 滚 动 文 字 </marquee> 

语法 解释 

只 要 在 标签 之 间 添 加 要 进行 滚动 的 文字 即 可 ， 而 且 还 可 以 在 标签 之 间 设 置 这 些 文字 的 字体 、 颜 色 等 。 
实例 代码 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 设 置 滚动 文字 </title> 

</head> 


<body> 
<marquee><font face=" 隶 书 " color="#0066FF" size="5"> 明 日 科技 欢迎 你 ! </font></marquee> 


(DOE ewerm 0- 0*]S ema 
明日 科技 欢迎 份 


图 10.1 设置 滚动 文字 
10.1.2 ”滚动 方向 属性 一 一 direction 
默认 情况 下 文字 只 能 是 从 右 向 左 滚动 ， 而 在 实际 应 用 中 常常 需要 不 同 滚动 方向 的 文字 ， 这 可 以 通 
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过 direction 属性 来 设置 。 
语法 
<marquee direction=" 滚 动 方向 "> 滚动 文字 </marquee> 
语法 解释 


该 语法 中 的 滚动 方向 属性 可 以 包含 4 个 取 值 ， 分 别 为 up、down、left 和 right， 分 别 表示 文字 向 上 、 
向 下 、 向 左 和 向 右 滚 动 ， 其 中 向 左 滚动 left 的 效果 与 默认 效果 相同 ， 而 向 上 滚动 的 文字 则 常常 出 现在 
网 站 的 公告 栏 中 。 


实例 代码 


<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee direction="down" > 

<font color="#FF3333"face=" 楷 体 " size="+4"> 明 日 科技 欢迎 你 </font> 
</marquee> 

<marquee direction="up" > 

<font color="#99FF00" face=" 隶 书 " size="+5"> 编 程 词典 横 空 出 世 ! </font> 
</marquee> 

</body> 

</html> 


运行 这 段 代 码 ， 可 以 看 到 如 图 10.2 所 示 的 滚动 文字 分 别 向 下 和 向 上 滚动 出 来 。 


eo Tr “国有 


明日 科技 欢迎 你 
编程 词典 横 空 出 世 ! 


图 10.2 ”设置 滚动 方向 


10.1.3 ”滚动 方式 属性 一 一 behavior 


除了 将 文字 设置 为 单方 向 的 滚动 外 ， 还 可 以 为 文字 设置 滚动 方式 ， 如 往复 运动 等 。 这 一 功能 可 以 
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通过 添加 behavior 属性 来 实现 。 
语法 
<marquee behavior=" 滚 动 方式 "> 滚动 文字 </marquee> 
语法 解释 
滚动 方式 behavior 的 取 值 如 表 10.1 所 示 ， 不 同 取 值 的 滚动 效果 也 不 相同 。 
表 10.1 behavior 的 取 值 及 其 效果 


效果 
循环 滚动 ， 默 认 效果 
只 滚动 一 次 就 停止 
来 回 交 蔡 进行 滚动 


behavior 的 取 值 
scroll 
slide 


alternate 


实例 代码 

<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 
<marquee behavior="scroll"> 古 之 成 大 事 者 </marquee> 
<marquee behavior="slide"> 不 惟有 超 士 之 才 </marquee> 
<marquee behavior="alternate"> 亦 有 坚忍 不 拔 之 志 </marquee> 

</body> 

</html> 


运行 这 段 代码 ， 可 以 看 到 如 图 10.3 所 示 的 效果 。 其 中 第 一 行文 字 不 停 地 循环 ， 一 圈 一 圈 地 滚动 ; 
而 第 二 行文 字 则 在 第 一 次 到 达 浏览 器 边缘 时 就 停止 了 滚动 ， 最 后 一 行文 字 则 在 滚动 到 浏览 器 左边 缘 后 
开始 反 向 运动 。 


2 er 
国 e ewe pox 


古 之 成 大 事 者 


不 惟有 超 士 之 才 
亦 有 坚忍 不 拔 之 志 


图 10.3 设置 滚动 方式 
10.1.4 滚动 速度 属性 一 一 scrollamount 
通过 scrollamount 属性 能 够 调整 文字 滚动 的 速度 。 


语法 


<marquee scrollamount=" 滚 动 速度 "></marquee> 
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语法 解释 
在 该 语法 中 ， 滚 动 文字 的 速度 实际 上 是 通过 设置 滚动 文字 每 次 移动 的 长 度 来 实现 的 ， 其 以 像素 为 
单位 。 

实例 代码 

<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 
<marquee scrollamount="3"> 一 步 一 步 慢 慢 地 走 </marquee> 
<marquee scrollamount="10"> 看 我 您 哉 地 跑 </marquee> 
<marquee scrollamount="50"> 小 豹子 的 速度 </marquee> 


</body> 
</html> 


运行 这 段 代码 , 可 以 看 到 3 行文 字 同 时 开始 滚动 , 但 是 速度 是 不 一 样 的 , 设置 的 scrollamount 值 越 
大 ， 速 度 也 就 越 快 ， 如 图 10.4 所 示 。 


文件 FF 篇 入 (5) 到 看 (/)。 收 东突 (A) 工具 TT) 帮助 fH) 


一 步 一 步 旨 盆地 走 
者 我 作战 地 踢 


10.4 设置 不 同 的 滚动 速度 


10.1.5 ”滚动 延迟 属性 一 一 scrolldelay 


scrolldelay 属性 可 以 设置 滚动 文字 滚动 的 时 间 间 隔 。 

语法 

<marquee scrolldelay=" 时 间 间 隔 "></marquee> 

语法 解释 

scrolldelay 的 时 间 间 隔 单位 是 毫秒 ， 也 就 是 千 分 之 一 秒 。 这 一 时 间 间 隔 的 设置 为 滚动 两 步 之 间 的 时 
间 间 隔 ， 如 果 设 置 的 时 间 比 较 长 ， 会 产生 走 走 停 停 的 效果 。 

如 果 与 滚动 速度 scrollamount 属性 结合 使 用 ， 效 果 更 明显 ， 下 面 以 实例 说 明 。 

实例 代码 

<html> 


<head> 


<title> 设 置 滚动 文字 </title> 
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</head> 

<body> 
<marquee scrollamount="100" scrolldelay="10"> 看 我 不 停 脚步 地 走 </marquee> 
<marquee scrollamount="100" scrolldelay="100"> 看 我 走 走 停 停 </marquee> 
<marquee scrollamount="100" scrolldelay="500"> 我 要 走 一 步 停 一 停 </marquee> 

</body> 

</html> 


运行 这 段 代码 ， 效 果 如 图 10.5 所 示 。 其 中 第 一 行文 字 设置 的 延迟 小 ， 因 此 走 起 来 比较 平滑 ， 最 后 
一 行 设置 的 延迟 比较 大 ， 看 上 去 就 像 是 走 一 步 软 一 会 儿 的 感觉 。 


文件 中 妨 久 (5) 到 看 (/) 收 京 夫 (A) 工具 TT) 帮助 (H) 
看 我 不 停 脚步 地 走 
停 停 


我 要 走 一 步 停 一 停 


图 10.5 设置 滚动 延迟 


10.1.6 “滚动 循环 属性 一 一 loop 


设置 滚动 文字 后 ， 默 认 会 不 断 地 循环 下 去 ， 如 果 希 望 文字 滚动 几 次 停止 ， 则 可 以 使 用 loop 属性 来 
进行 设置 。 

语法 

<marquee loop=" 循 环 次 数 "> 滚动 文字 </marquee> 

实例 代码 


<html> 
<head> 
<title> 设 置 滚动 文字 </title> 
</head> 
<body> 
<marquee direction="up" loop="10"> 
<font color="#FF0000" face=" 隶 书 " size="+3"> 
君子 之 交 淡 若水 <br/> 
小 人 之 交 甘 若 柄 <br/> 
</font> 
</marquee> 
</body> 
</html> 


运行 这 段 代 码 ， 设 定 了 滚动 文字 进行 10 次 循环 ， 如 图 10.6 所 示 。 
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| 寻 子 之 交 淡 若水 
小 人 之 交 甘 若 醴 


图 10.6 设置 滚动 的 循环 次 数 


10.1.7 ”滚动 范围 属性 一 一 width、height 


如 果 不 设置 滚动 背景 的 面积 ， 那 么 默认 情况 下 ， 水 平 滚动 的 文字 背景 与 文字 同 高 、 与 浏览 器 窗口 
同 宽 ， 使 用 width 和 height 属性 可 以 调整 其 水 平和 垂直 的 范围 。 


语法 

<marquee width=" height="> 滚 动 文字 </marquee> 
语法 解释 

此 处 设置 宽度 和 高 度 的 单位 均 为 像素 。 

实例 代码 


<html> 

<head> 

<title> 设 置 滚动 文字 </title> 

</head> 

<body> 

<marquee behavior="alternate" bgcolor="#66FFFF"> 王 勃 </marquee><br/><br/> 

<marquee behavior="alternate" bgcolor="#66CCFF" width="500" height="50"> 
老 当 益 壮 , 宁 知 白 首 之 心 ; 穷 且 益 坚 ,不 坠 青云 之 志 
</marquee> 


a owvaio hn -~ cx 


图 10.7 设置 滚动 文字 背景 的 面积 
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10.1.8 滚动 背景 颜色 属性 一 bgcolor 


在 网 页 中 ， 为 了 突出 某 部 分 内 容 ， 常 使 用 不 同 的 背景 色 来 显示 。 也 可 以 单独 为 滚动 文字 设置 背景 色 。 
语法 
<marquee bgcolor=" 颜 色 代码 "> 滚动 文字 </marquee> 
语法 解释 
文字 背景 颜色 设置 为 十 六 进 制 数 颜色 码 。 
实例 代码 
<html> 
<head> 
<title> 设 置 滚动 文字 </title> 
</head> 
<body> 
<marquee bgcolor="#CCFFCC" behavior="alternate"> 蜀 相 &nbsp;&nbsp; 作 者 : 杜甫 
</marquee><br/><br/> 
<marquee bgcolor="#FFCCFF" direction="up"> 
孙 相 祠堂 何 处 寻 ? 锦 官 城 外 柏 森 森 。<br/> 
映 阶 脾 草 自 春色 ， 隔 叶 黄酮 空 好 音 。<br/> 
三 顾 频 烦 天 下 计 ， 两 朝 开 济 老臣 心 。<br/> 
出 师 未 捷 身 先 死 ， 长 使 英雄 泪 满 襟 。<br/> 
</marquee> 
</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 在 滚动 文字 后 面 设置 了 淡 蓝 色 的 表 景 ， 如 图 10.8 所 示 。 


文件 们 。 蝙 锅 (5) 坦 看 (/) 收 硬 交 (A) 工具 (T) 大 动 (H) 


晶 相 作者 : 杜甫 


Fi a 锦 官 城 外 析 森 森 。 
喘 阶 碧 草 自 春色 。 隔 叶 黄酮 宇 好 首 。 
有 全 


图 10.8 设置 滚动 文字 背景 


10.1.9 ”滚动 空间 属性 一 一 hspace、vspace 


在 滚动 文字 的 四 周 ， 可 以 设置 水 平 范围 和 垂直 范围 。 
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语法 
<marquee hspace=" 水 平 范围 " vspace=" 垂 直 范围 "> 滚动 文字 </marquee> 
语法 解释 
该 语法 中 水 平和 垂直 范围 的 单位 均 为 像素 。 
实例 代码 
<html> 
<head> 
<title> 设 置 滚动 文字 </title> 
</head> 
<body> 
不 设置 空白 空间 的 效果 : 
<marquee behavior="alternate" bgcolor="#FFCC33"> 
明日 科技 欢迎 你 ! 
</marquee> 
明日 科技 致力 于 编程 的 发 展 ! ! 
<br/> 
<hr color="#0099FF" /> 
<br/> 
设置 水 平 为 90 像素 、 垂 直 为 50 像素 的 空白 空间 : 
<marquee behavior="alternate" bgcolor="#CCCC00" hspace="90" vspace="50"> 
明日 科技 欢迎 你 ! 
</marquee> 
明日 科技 致力 于 编程 的 发 展 ! ! 
</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 设置 空白 空间 的 效果 如 图 10.9 所 示 。 


eS Emr "| 


不 设置 空白 空间 的 效果 ， 


设置 水 平 为 90 像 素 、 委 直 为 50 像 素 的 空白 空间 ， 


| 明日 科技 臻 为 于 编程 的 发 展 ! ! 


图 10.9 设置 滚动 文字 周围 的 空白 空间 
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10.2 添加 背景 音乐 
鳃 ml 教学 录像 : 光盘 \TIMNIx\10\ 添 加 背景 音乐 .exe 


10.2.1 ”设置 背景 音乐 一 一 bgsound 


在 网 页 中 ， 除 了 可 以 嵌入 普通 的 声音 文件 外 ， 还 可 以 为 某 个 网 页 设置 背景 音乐 。 作 为 背景 音乐 的 
可 以 是 音乐 文件 ， 也 可 以 是 声音 文件 ， 其 中 最 常用 的 是 MIDI 文件 。 


语法 
<bgsound src=" 背 景 音乐 的 地 址 "> 
语法 解释 


作为 背景 音乐 的 文件 还 可 以 是 AVI 文件 、MP3 文件 等 音乐 文件 。 
例 10.1 实例 代码 (实例 位 置 ， 光盘 \TMN\sIMO\1) 


<html> 
<head> 
<title> 设 置 背景 音乐 </title> 
</head> 
<body> 
<bgsound src="music/zj.mp3"/> 
<center> 
<font face=" 黑 体 " size="+4" color="#FFCC66" > 直觉 </font><br/> 
<font size="+3"> 梁 静 茹 </font> 
</center> 
<hr width="200" size="5" /> 
什么 话 都 不 要 说 你 要 的 快乐 我 全 都 能 懂 <br/><br/> 
一 个 眼神 就 足够 你 的 微笑 就 述说 了 所 有 <br/><br/> 
你 和 我 同时 喜欢 一 本 小 说 <br/><br/> 
同样 的 爱 上 了 自由 我 们 都 明白 了 <br/><br/> 
我 的 直觉 告诉 我 直觉 不 会 错 <br/><br/> 
不 必 说 破 你 心里 想 的 就 是 我 <br/><br/> 
心事 都 给 我 猜 透 <br/><br/> 
我 的 直觉 告诉 我 直觉 就 是 我 <br/> <br/> 
小 小 动作 把 秘密 都 告诉 了 我 <br/><br/> 
点 点 头 就 让 我 守 在 你 左右 不 走 <br/><br/> 
我 的 直觉 它 告诉 我 你 心里 想 的 人 是 我 <br/><br/> 
我 的 直觉 它 对 我 说 让 我 守候 在 你 左右 <br/><br/> 
<hr size="5" /> 
</body> 
</html> 
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运行 这 段 代码 , 打开 如 图 10.10 所 示 的 界面 , 在 打开 页 面 之 后 就 可 以 听见 背景 音乐 响起 ， 同 时 在 页 


上 显示 背景 音乐 的 歌词 。 


5 
Bae ovorm p- ox|eusssss x| 


梁静茹 
什么 话 部 不 要 说 你 要 的 快乐 我 全 部 能 懂 
一 个 眼神 就 足够 你 的 微笑 就 述说 了 所 有 
你 和 我 同时 喜欢 一 本 小 说 
同样 的 爱 上 了 自由 我 们 都 明白 了 
我 的 直觉 告诉 我 直觉 不 会 错 
不 必 说 大 你 心里 想 的 就 是 我 
心事 都 给 我 猜 返 
我 的 直觉 告诉 我 直觉 就 是 我 
小 小 动作 把 秘密 都 告诉 了 我 
点 点 头 就 让 我 守 在 你 左右 不 走 
我 的 直觉 它 洁 诉 我 你 心里 想 的 人 是 我 
我 刚直 货 它 对 我 说 让 我 守候 在 你 左右 


10.10 设置 背景 音乐 


10.2.2 ”设置 循环 播放 次 数 一 一 loop 


亲 


an 


通常 情况 下 ， 背 景 音乐 需要 不 断 地 播放 ,但 有 时 也 需要 指定 播放 的 次 数 。 这 一 功能 实现 起 来 并 


只 要 设置 相应 的 loop 属性 即 可 。 

语法 

<bgsound src=" 背 景 音乐 的 地 址 " loop=" 循 环 次 数 "> 

语法 解释 

如 果 希 望 无 限 次 循环 播放 背景 音乐 ， 可 将 loop 的 值 设置 为 tue。 
实例 代码 


<html> 
<head> 
<title> 设 置 背景 音乐 </title> 
</head> 
<body> 
<bgsound src="music/zj.mp3" loop="2"/> 
<center> 
<font face=" 黑 体 " size="+4" color="#FFCC66"> 直 觉 </font><br/> 


不 
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<font size="+3"> 梁 静 茹 </font> 

</center> 
<hr width="200" size="5" /> 
什么 话 都 不 要 说 你 要 的 快乐 我 全 都 能 懂 <br/><br/> 
一 个 眼神 就 足够 你 的 微笑 就 述说 了 所 有 <br/><br/> 
你 和 我 同时 喜欢 一 本 小 说 <br/><br/> 
同样 的 爱 上 了 自由 我 们 都 明白 了 <br/><br/> 
我 的 直觉 告诉 我 直觉 不 会 错 <br/><br/> 
不 必 说 破 你 心里 想 的 就 是 我 <br/><br/> 
心事 都 给 我 猜 透 <br/><br/> 
我 的 直觉 告诉 我 直觉 就 是 我 <br/> <br/> 
小 小 动作 把 秘密 都 告诉 了 我 <br/><br/> 
点 点 头 就 让 我 守 在 你 左右 不 走 <br/><br/> 
我 的 直觉 它 告诉 我 你 心里 想 的 人 是 我 <br/><br/> 
我 的 直觉 它 对 我 说 让 我 守候 在 你 左右 <br/><br/> 
<hr size="5" /> 

</body> 

</html> 


运行 这 段 代 码 ， 背 景 音乐 在 循环 播放 2 次 以 后 停止。 


10.3 添加 多 媒体 文件 


名 教学 录像 : 光盘 \TIM\Ix\10\ 添 加 多 媒体 文件 .exe 
如 果 在 网 页 中 加 入 音乐 或 视频 文件 ， 可 以 使 单调 的 网 页 变 得 更 加 生动 。 但 是 如 果 要 正确 浏览 嵌入 


了 这 些 文件 的 网 页 ， 就 需要 在 客户 端的 计算 机 中 安装 相应 的 播放 软件 。 使 用 <embed> 标 记 可 以 将 多 媒 
体 文件 嵌入 到 网 页 中 。 


习 


10.3.1 添加 多 媒体 文件 标记 一 一 embed 

在 网 页 中 常见 的 多 媒体 文件 包括 声音 文件 和 视频 文件 。 

语法 

<embed src=" 多 媒体 文件 地 址 " width=" 播 放 界面 的 宽度 " height=" 播 放 界 面 的 高 度 "></embed> 

语法 解释 

在 该 语法 中 , width 和 height 一 定 要 设置 , 单位 是 像素 , 否则 无 法 正确 显示 播放 多 媒体 文件 的 软件 。 
例 10.2 实例 代码 实例 位 置 ， 光盘 \TMNsIM0W2) 


<html> 

<head> 

<title> 嵌 入 多 媒体 文件 </title> 
</head> 
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<body> 
<center> 
<embed src="z/aa.avi" width="200" height="240"></embed> 
</center> 

</body> 

</html> 


运行 这 段 代码 ， 可 以 看 到 一 个 播放 页 面 ， 如 图 10.11 所 示 。 单 击 页 面 中 的 “播放 ”按钮 @ 可 以 播 
放 插入 的 声音 文件 aa.avi。 


图 10.11 嵌入 多 媒体 文件 


10.3.2 ”设置 自动 运行 一 一 autostart 


打开 网 页 时 常常 会 看 到 一 些 视频 文件 直接 开始 运行 ， 不 需要 手动 开始 ， 特 别 是 浏览 网 页 时 弹出 的 
广告 ， 广 告 内 容 的 自动 播放 主要 是 通过 autostrat 参数 来 实现 的 。 


语法 
<embed src=" 多 媒体 文件 地 址 " autostart=" 是 否 自动 运行 "></embed> 
语法 解释 


autostart 的 取 值 有 两 个 :一 个 是 tue， 表 示 自 动 播放 ， 另 一 个 是 false， 表 示 不 自动 播放 。 
例 10.3 实例 代码 〈 实 例 位 置 ; 光盘 \TMNsN10\3) 


<html> 

<head> 

<title> 设 置 自动 运行 </title> 

</head> 

<body> 
<center> 
下 面 的 视频 文件 中 第 一 个 视频 文件 将 会 自动 播放 ， 第 二 个 视频 文件 需要 手动 播放 。 
<hr size="2" color="#FF6633" /> 
<embed src="z/aa.avi" autostart="true" width="200" height="240"></embed> 
<hr size="3" color="#FF6633" /> 
<embed src="z/aa.avi" autostart="false" width="200" height="240"></embed> 
</center> 
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</body> 
</html> 


运行 这 段 代码 ， 可 以 看 到 两 个 视频 文件 的 不 同 效果 ， 如 图 10.12 所 示 。 


IE x 件 中 第 一 个 视频 文件 这， 第 二 个 视频 
文件 需要 手动 播放 ， 


mm 


图 10.12 设置 自动 运行 


10.3.3 ”设置 媒体 文件 的 循环 播放 一 一 loop 


通过 设置 loop 属性 ， 可 以 设 定 背景 音乐 的 循环 次 数 。 

语法 

<embed src=" 多 媒体 文件 地 址 " loop=" 是 否 循环 播放 "></embed> 

语法 解释 

在 该 语法 中 ，loop 的 取 值 不 是 具体 的 数字 ， 而 是 true 或 false， 如 果 取 值 为 tue， 表 示 媒 体 文 件 将 
无 限 次 地 循环 播放 ， 如 果 取 值 为 false， 则 只 播放 一 次 。 

实例 代码 

<html> 

<head> 

<title> 设 置 循环 播放 </title> 

</head> 


<body> 
<center> 
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下 面 的 视频 文件 将 循环 播放 : 
<hr size="2" color="#99FF00" /> 
<embed src="z/aa.avi" autostart="true" loop="true" width="200" height="240"></embed> 
</center> 
</body> 
</html> 


运行 这 段 代 码 ， 效 果 如 图 10.13 所 示 。 


10.13 ”媒体 文件 不 停 地 循环 播放 


10.3.4 ”隐藏 面板 一 一 hidden 


其 实 也 可 以 将 媒体 文件 的 声音 保留 而 隐藏 图 像 ， 这 就 相当 于 设置 了 背景 声音 。 通 过 hidden 参数 可 


以 隐藏 播放 面板 。 
语法 
<embed src=" 多 媒体 文件 地 址 " hidden=" 是 否 隐藏 "></embed> 
语法 解释 


在 该 语法 中 hidden 可 以 设置 两 个 值 : 一 个 是 tue， 表 示 隐 藏 面板 ; 另 一 个 是 false， 表 示 显 示 面 板 ， 


这 是 添加 媒体 文件 的 默认 选项 。 如 果 要 保留 声音 ， 就 要 设置 文件 的 自动 播放 。 
实例 代码 
<html> 
<head> 
<title> 设 置 隐藏 面板 </title> 
</head> 
<body> 
<center> 
下 面 的 视频 文件 播放 面板 被 隐藏 : 
<hr size="2" color="#99FF00" /> 
<embed src="z/aa.avi" autostart="true" hidden="true"width="200" height="240"></embed> 
</center> 
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</body> 
</html> 


运行 这 段 代 码 ， 可 以 看 到 播放 控制 面板 已 经 不 见 了 ， 只 能 听 到 播放 的 声音 效果 ， 如 图 10.14 所 示 。 


10.3.5 添加 其 他 类 型 的 媒体 文件 


除了 AVI 媒体 文件 之 外 ， 在 网 页 中 还 可 以 嵌入 Flash、MPEG 等 类 型 的 媒体 文件 ， 方 法 与 AVI 媒 
体 文件 相同 。 
例 10.4 实例 代码 〈 实 例 位 置 ， 光盘 \TMNsIN10M4) 


<html > 

<head> 

<title> 嵌 入 多 媒体 文件 </title> 
</head> 

<body> 

下 面 嵌 入 不 同类 型 的 媒体 文件 : <br/> 
<embed src="cd.swf"></embed> 
</body> 

</html> 


运行 这 段 代 码 ， 看 到 在 页 面 中 添加 了 不 同类 型 的 媒体 文件 ， 如 图 10.15 所 示 。 其 中 ， 媒 体 文件 为 
Flash 类 型 。 


下面 区 入 不 同类 型 的 媒体 文件 ， 


图 10.14 隐藏 播放 面板 图 10.15 添加 的 Flash 媒体 文件 
10.4 小 结 


本 章 主要 介绍 了 设置 滚动 文字 、 添 加 背景 音乐 、 添 加 多 媒体 文件 的 方法 。 多 媒体 是 一 个 网 站 的 必 
备 元 素 ， 使 用 它 可 以 丰富 网 站 的 视听 效果 。 熟 练 掌握 多 媒体 添加 技术 会 为 日 后 开发 网 站 打下 一 个 很 好 
的 基础 。 


Pi 
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10.5 习 题 


选择 题 
1. 下 面 关 于 使 用 视频 数据 流 的 说 法 错误 的 是 (  )。 
A. 浏览 器 在 接收 到 第 一 个 包 的 时 候 就 开始 播放 
B. 动画 可 以 使 用 数据 流 的 方式 进行 传输 
C. 音频 可 以 使 用 数据 流 的 方式 进行 传输 
D. 文本 不 可 以 使 用 数据 流 的 方式 进行 传输 
2. 动态 HTML 文档 的 多 媒体 控件 "Structured Graphics" 表 示 〈 
.显示 基于 坐标 的 图 形 对 象 
.产生 各 种 清除 、 抓 拍 、 彩 晕 和 消散 效果 
.创建 多 种 视觉 ， 包 括 亮度 效果 
.显示 动画 图 形 对 象 
动态 HTML 文档 的 多 媒体 控件 "Miser" 表 示 ( 。 )。 
.同时 播放 多 个 声音 文件 
.为 子 画面 和 其 他 可 视 化 对 象 定义 移动 路 径 
.控制 多 媒体 控件 的 定时 自动 播放 
.显示 动画 图 形 对 象 
判断 题 
4. <bgsound> 标 签 中 autostart 属性 用 来 定义 是 否 在 音乐 下 载 完 毕 之 后 就 自动 播放 ，true 为 是 ，false 
为 否 。(  ) 
5. <bgsound> 标 签 中 loop 属性 用 来 定义 是 否 自动 反复 播放 ， 如 果 loop=2 表示 重复 两 次 。( ) 
6. volume=" 术 设 定 音 量 的 大 小 ， 数 值 是 0 一 1000 之 间 。( ) 


填空 题 

7. 在 网 页 中 嵌入 多 媒体 ， 如 电影 、 声 音 等 用 到 的 标签 是 3 

8. 在 页 面 中 添加 背景 音乐 bg.mid， 循 环 播放 3 次 的 语句 是 

.在 页 面 中 实现 滚动 文字 的 标签 是 

10. 用 来 在 视频 窗口 下 附加 MS-Windows 的 AVI 播放 控制 条 的 属性 是 


> 


口 口 邓 


迎 


Am> 


马 
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娃 吾 吾 于 至 于 竺 于 于 吾 于 至 


本 篇 对 HTML 5 中 新 增 的 语法 与 标记 方法 、 新 增 元 素 、 新 增 API 以 及 目前 哪些 
浏览 器 提供 对 它们 的 支持 等 内 容 进行 了 详细 的 介绍 。 在 对 它们 进行 介绍 的 同时 ， 将 
其 与 HTML4 中 的 各 种 元 素 与 功能 进行 了 对 比 , 以 帮助 读者 更 好 地 理解 为 什么 要 使 
用 HTML5、 牢 国事 握 使 用 HTML 5 的 具体 操作 方法 。 
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HTML 5 的 新 特性 


( 她 教学 录像 :6 分钟 ) 


自从 2010 年 正式 推出 以 来 ，HTML 5 一 直 受 到 世界 各 大 浏览 器 开发 者 的 热烈 欢 
迎 与 支持 。 根 据 IT 业界 知名 媒体 评论 ，Web 2.0 时 代 ， 将 是 属于 HTML 5 的 时 代 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 

M 了 解 HTML5 

WI 熟悉 HTML 5 的 无 插件 范式 

Wm 了 解 HTML 5 的 新 特性 


HTML 5 从 入 门 到 精通 
11.1 谁 在 开发 HTML 5 
鳃 ml 教学 录像 : 光盘 \TIM\Ix\11\ 谁 在 开发 HTML S.exe 
我 们 都 知道 开发 HTML 5 需要 成 立 相应 的 组 织 ， 并 
要 组 织 的 工作 。 


WHATWG: 


F 且 肯定 需要 有 人 来 负责 。 这 正 是 下 面 这 3 个 重 
Apple、Mozilla、Google、Opera 等 浏览 器 开发 者 组 成 ,成 立 于 2004 稀 
开发 HTML 和 Web 应 用 API， 同 
W3C: W3C 下 辖 的 HTML 了 


F。WHATWG 
时 为 各 浏览 器 开发 者 以 及 其 他 有 意向 的 组 织 提供 开放 式 合作 。 
[ 作 组 目前 负责 发 布 HTML 5 规范 。 


IETF (Internet Engineering Task Force, 因特网 工程 任务 组 ) : 这 个 任务 组 下 辖 HTTP 等 负责 Internet 
协议 的 团队 。HTML 5 定义 的 一 种 新 API (WebSocket API) 基于 新 的 WebSocket 协议 ，IETF 工作 组 了 
在 开发 这 个 协议 。 


11.2 HTML 5 的 新 认识 


任何 新 鲜 事物 的 出 现 ， 都 会 带 给 人 们 惊喜 ， 同 时 也 会 存在 很 多 争议 。 虽 然 Web 开发 者 普遍 认为 
HTML 5 的 出 现 是 令 人 兴奋 的 ， 但 还 是 有 些 担心 。 例 如 ， 新 的 HTML 5 在 旧版 本 的 浏览 器 上 能 否 正常 
运行 ， 会 不 会 产生 错误 等 问题 。HTML 5 是 基于 各 种 各 样 的 理念 进行 设计 的 ， 这 些 设 计 理 念 体现 了 对 
可 能 性 和 可 行 性 的 新 认识 。 

兼容 性 。 


实用 性 。 
四 ”互通 性 。 


11.2.1 兼容 性 


L 5 标准 的 一 些 特性 非常 具有 革命 性 ， 但 是 HTML 5 旨 在 进化 而 非 革命 。 这 一 点 
过 兼容 性 体现 出 来 的 。 正 是 


因为 保障 了 兼容 性 才能 让 人 们 毫 不 犹 列 地 选择 HTML 5 开发 网 站 。 
11.2.2 ”实用 性 和 用 户 优先 


虽然 到 了 HTML 5 时 代 ， 但 并 不 意味 着 用 HTML 4 创建 出 来 的 网 站 必须 全 部 要 重建 。HTML 5 并 
不 是 颠覆 性 的 革新 ;相反 ， 它 的 一 个 核心 理念 就 是 保持 一 切 新 特性 的 平滑 过 渡 。 
尽管 HTM 


E 是 通 


HTML 5 规范 是 基于 用 户 优先 原则 编写 的 ， 其 主要 宗旨 是 “ 
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解决 的 冲突 时 ， 规 范 会 把 用 户 放 到 第 一 位 ， 其 次 是 页 面 的 作者 ， 再 次 是 实现 者 (或 浏览 器 ) ， 接 着 是 
规范 制定 者 ， 最 后 才 考虑 理论 的 纯粹 实现 。 因 此 ，HTML 5 内 只 封装 了 切实 有 用 的 功能 ， 而 封装 复杂 
而 没有 实际 意义 的 功能 。 


11.2.3 ”化 繁 为 简 


HTML 5 的 口号 是 “简单 至 上 ， 尽 可 能 简化 ”。 因 此 ，HTML 5 做 了 以 下 改进 。 
回 ”以 浏览 器 原生 能 力 蔡 代 复 杂 的 JavaScript 代码 。 

回 ”新 的 简化 的 DOCTYPE。 

回 ”新 的 简化 的 字符 集 声明 。 

简单 而 强大 的 HTML5API。 

我 们 将 在 以 后 的 章节 中 将 详细 讲解 这 些 改进 。 


11.3 无 插件 范式 


过 去 ,很 多 功能 只 能 通过 插件 或 者 复杂 的 hack( 本 地 绘图 API、 本 地 socket 等 ) 来 实现 ,但 在 HTML 5 
中 提供 了 对 这 些 功 能 的 原生 支持 。 插 件 的 方式 存在 很 多 问题 。 

回 ”插件 安装 可 能 失败 。 

回 ”插件 可 能 被 禁用 或 者 是 屏蔽 。 

加 ”插件 自身 会 成 为 被 攻击 的 对 象 。 

回 ”插件 不 容易 与 HTML 文档 的 其 他 部 分 集成 〈 因 为 插件 边界 、 前 裁 和 透明 度 问 题 )。 

虽然 一 些 插件 的 安装 率 很 高 ， 但 在 控制 严格 的 公司 内 部 网 络 环境 中 经 常会 被 封锁 。 此 外 ， 由 于 插 
件 经 常 给 用 户 带 来 烦人 的 广告 ， 一 些 用 户 也 会 选择 屏蔽 此 类 插件 。 如 果 用 户 禁 用 了 插件 ， 就 意味 着 依 
赖 该 插件 显示 的 内 容 也 无 法 表现 出 来 。 

在 我 们 已 经 设计 好 的 页 面 中 ， 要 想 把 插件 显示 的 内 容 与 页 面 上 其 他 元 素 集成 也 比较 困难 ， 因 为 会 
引起 剪裁 和 透明 度 等 问题 。 插 件 使 用 的 是 自 带 的 模式 ， 与 普通 Web 页 面 所 使 用 的 不 一 样 ， 所 以 当 弹 出 
菜单 或 者 其 他 可 视 化 元 素 与 插件 重 谷 时 ， 会 特别 麻烦 。 这 时 ， 就 需要 HTML 5 应 用 原生 功能 来 解决 ， 
它 可 以 直接 用 CSS 和 JavaScript 的 方式 控制 页 面 布 局 。 实 际 上 这 也 是 HTML 5 的 最 大 亮点 ， 显 示 了 先 
前 任何 HTML 版 本 都 不 具备 的 强大 能 力 。HTML 5 不 仅仅 是 提供 了 新 元 素 支持 新 功能 ， 更 重要 的 是 添 
加 了 对 脚本 和 布局 之 间 的 原生 交互 能 力 ， 鉴 于 此 我 们 可 以 实现 以 前 不 能 实现 的 效果 。 

以 HTML 5 中 的 canvas 元 素 为 例 ， 有 很 多 非常 底层 的 事情 以 前 是 没 办 法 做 到 的 (如 在 HTML 4 
的 页 面 中 就 很 难 画 出 对 角 线 ) ， 而 有 了 canvas 就 可 以 很 容易 地 实现 了 。 更 为 重要 的 是 新 API 释放 出 
来 的 潜能 , 以 及 仅 需 寥寥 几 行 CSS 代码 就 能 完成 布局 的 能 力 。 基于 HTML 5 的 各 类 API 的 优秀 设计 
我 们 可 以 轻松 对 它们 进行 组 合 应 用 。HTML 5 的 不 同 功能 组 合 应 用 为 Web 开发 注入 了 一 股 强大 的 新 
生 力 量 。 
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11.4 _ HTML 5 的 新 特性 


HTML 5 给 人 们 带 来 了 很 多 惊喜 ， 如 下 面 的 优点 和 新 特性 。 
新 特性 应 该 基于 HTML、CSS、DOM 和 JavaScript。 
减少 了 对 外 部 插件 的 需求 (如 Flash)。 
更 优秀 的 错误 处 理 。 
更 多 取代 脚本 的 标记 。 
HTML 5 应 该 独立 于 设备 。 
用 于 绘画 的 canvas 元 素 。 
用 于 媒介 回放 的 video 和 audio 元 素 。 
对 本 地 离线 存储 的 更 好 的 支持 。 
新 元 素 和 表单 控件 。 
pt 正在 如 今 的 浏览 器 最 新 版 本 中 得 到 越 来 越 普遍 的 实现 ， 越 来 越 多 的 开发 者 开始 学 
习 和 使 用 这 些 新 特性 。 


网 加 网 网 加 网 网 罗网 


11.5 小 结 


本 章 着 重 介绍 了 HTML 5 的 发 展 、 对 HTML 5 的 新 认识 以 及 HTML 5 的 新 特性 。 通过 本 章 的 学 习 ， 
希望 读者 能 够 仔细 体会 HTML 5 的 新 特性 ， 并 且 能 够 举一反三 地 总 结 出 使 用 HTML 5 到 底 可 以 解决 哪 
些 问题 ， 从 而 为 以 后 更 深层 次 地 学 习 HTML 5 打下 好 的 基础 。 
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HTML5 与 HTML 4 的 区 别 
( 名 教学 录像 : 51 分 钟 ) 


HTML5 以 HTML4 为 基础 ,对 HTML4 进行 了 大 量 的 修改 。 本 章 将 从 总 体 上 
介绍 HTML5 对 HTML4 到 底 进行 了 哪些 修改 ? 它们 之 间 比 较 大 的 区 别 是 什么 ? 
通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


ml 
ml 
ml 
ml 


掌握 HTML 5 与 HTML 4 在 基本 语法 上 的 区 别 
掌握 HTML 5 中 新 增 的 元 素 和 废除 的 元 素 
了 解 HTML 5 中 新 增 的 属性 和 废除 的 属性 
掌握 全 局 属性 
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12.1 语法 的 改变 
镶 m 教学 录像 : 光盘 \TIM\NIX\12\ 语 法 的 改变 .exe 


12.1.1 HTML 5 的 语法 变化 


HTML 5 的 语法 发 生 了 很 大 的 变化 ， 但 HTML 5 的 “语法 变化 ”和 其 他 编程 语言 所 谓 的 语法 变更 
意义 有 所 不 同 。 出 现 这 种 结果 的 原因 是 以 前 的 HTML 几乎 没有 遵循 规范 实现 的 Web 浏览 器 。 
(1) 现 有 浏览 器 与 规范 背离 
HTML 的 语法 是 在 SGML (Standard Generalized Markup Language) 语言 的 基础 上 来 规定 的 。 但 是 
由 于 SGML 的 语法 非常 复杂 , 文档 结构 解析 程序 的 开发 也 不 太 容易 , 多数 Web 浏览 器 并 不 作为 SGML 
解析 器 运行 。 由 此 ，HTML 规范 中 虽然 要 求 “ 应 遵循 SGML 的 语法 ”， 但 实际 情况 却 是 遵循 规范 实现 
的 Web 浏览 器 几乎 不 存在 。 
(2) 规范 向 实现 靠拢 
如 上 所 述 ，HTML 5 中 提高 Web 浏览 器 间 的 兼容 性 是 重大 的 目标 之 一 。 要 确保 兼容 性 ， 必 须 消除 规 
范 与 实现 的 背离 。 因 此 HTML 5 以 近似 现 有 的 实现 ， 重 新 定义 了 新 的 HTML 语法 ， 使 规范 向 实现 靠拢 。 
由 于 文档 结构 解析 的 算法 有 详细 的 记载 ， 使 得 Web 浏览 器 开发 者 可 以 专注 于 遵循 规范 去 进行 实现 
工作 。 在 新 版 本 的 FireFox 和 WebKit (Nightly Builder 版 ) 中 , 已 经 内 置 了 遵循 HTML 5 规范 的 解析 器 。 
正和 Opera 也 为 了 能 够 提供 更 好 的 兼容 性 而 紧锣密鼓 地 努力 着 。 


12.1.2 HTML 5 中 的 标记 方法 


首先 来 看 一 下 在 HTML 5 中 的 标记 方法 。 
(1) 内 容 类 型 (ContentType) 
首先 ，HTML 5 文件 的 扩展 名 和 内 容 类 型 没有 发 生变 化 ， 即 扩展 名 还 是 .html 或 .htm， 内 容 类 型 还 
是 .text/html。 
(2) doctype 声明 
要 使 用 HTML 5 标记 ， 必 须 先 进行 如 下 的 doctype 声明 ， 不 区 分 大 小 写 。Web 浏览 器 通过 判断 文 
件 开 头 有 没有 这 个 声明 ， 来 决定 解析 器 和 演 染 类 型 是 否 切 换 成 对 应 的 HTML 5 模式 。 
<ldoctype html> 


另外 ， 当 使 用 工具 时 ， 也 可 以 在 doctype 声明 方式 中 加 入 system 标记 ， 不 区 分 大 小 写 ， 还 可 将 双 
引号 换 为 单 引 号 来 使 用 ， 声 明 方法 如 下 面 的 代码 。 


<!doctype html system "about:legacy-compat"> 
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(3) 字符 编码 的 设置 
字符 编码 的 设置 方法 也 有 些 新 的 变化 。 以 前 ， 设 置 HTML 文件 的 字符 编码 时 ， 要 用 到 meta 元 素 ， 


代码 如 下 。 
<meta http-equiv="Content-Type" content= "text/html;charset=UTF-8"> 


meta 元 素 的 新 属性 charset 来 设置 字符 编码 。 


在 HTML 5 中 ， 可 以 使 
<meta charset="UTF-8"> 
以 上 两 种 方法 都 有 效 。 因 此 也 可 以 继续 使 用 前 者 (通过 content 元 素 的 属性 来 设置 ) ， 但 二 者 不 能 
同时 使 用 。 如 下 所 示 代 码 的 使 用 方法 是 错误 的 。 


<!-- 不 能 混合 使 用 charset 属性 和 http-equiv 属性 --> 
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8"> 


人 6 注意 人 HTML ;开交 ， 文件 的 字符 编码 推荐 使 用 UTF-8. 


12.1.3 ”HTML 5 语法 中 的 3 个 要 点 


HTML 5 中 规定 的 语法 ， 在 设计 上 与 现 有 HTML 之 间 进 行 了 最 大 程度 的 兼容 。 例如， 在 Web 上 充 
斥 着 “<p> 没 有 结束 标签 ”等 HTML 现象 。HTML 5 并 不 将 这 些 视 为 错误 ， 反 而 采取 了 “人 允许 这 些 现 
象 存在 ， 并 明确 记录 在 规范 中 ”的 方法 。 因 此 ， 尽 管 与 XHTML 相 比 标记 比较 简洁 ， 而 在 遵循 HIML 5 
的 Web 浏览 器 中 也 能 保证 生成 相同 的 DOM。 那 么 下 面 就 来 看 看 具体 的 HTML 5 语法 。 

(1) 可 以 省 略 标签 的 元 素 

在 HTML 5 中 ， 有 些 元 素 可 以 省 略 标签 。 具 体 有 以 下 3 种 情况 。 

Q@ 不 允许 写 结束 标签 的 元 素 有 area、base、br、col、command、embed、hr、img、input、keygen、 
link、 meta、param、source、track、wbr。 

不 允许 写 结束 标记 的 元 素 是 指 不 允许 使 用 开始 标记 与 结束 标记 将 元 素 括 起 来 的 形式 ， 只 允许 使 

“< 元 素 />” 的 形式 进行 书写 。 例 如 ，“<br>...</br>” 的 写法 是 错误 的 ， 应 该 写成 “<br/>”。 但 是 ， 
沿袭 下 来 的 “<br>” 的 写法 也 是 允许 的 。 
@ 可 以 省 略 结束 标签 的 元 素 有 li、dt、dd、p、rt、mp、optgroup、option、colgroup、thead、tbody、 
tfoot、tr、td、th。 
@ 可 以 省 略 整个 标签 的 元 素 有 html、head、body、colgroup、tbody。 
需要 注意 的 是 ， 虽 然 这 些 元 素 可 以 省 略 ， 但 实际 上 却 是 隐 式 存在 的 。 例 
但 在 DOM 树 上 它 是 存在 的 。 
上 述 元 素 中 也 包括 了 HTML 5 的 新 元 素 。 有 关 这 些 新 元 素 的 用 法 ， 将 在 后 面 的 章节 中 详细 讲解 。 


(2) 取得 boolean 值 的 属性 
取得 布尔 值 (boolean) 的 属性 ,如 disabled 和 readonly 等 , 通过 省 略 属性 的 值 来 表达 “ 值 为 true”; 


如 果 要 表达 “ 值 为 false”， 则 直接 省 略 属性 本 身 即 可 。 此 外 ， 当 写 明 属 性 值 来 表达 “ 值 为 tue” 时 ， 


如 ，<body> 标 签 可 以 省 略 ， 
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可 以 将 属性 值 设 为 属性 名 称 本 身 ， 也 可 以 将 值 设 为 空 字符 串 ， 代 码 如 下 。 


< 上 -以 下 的 checked 属性 值 皆 为 true --> 
<input type="checkbox" checked> 

<input type="checkbox" checked="checked"> 
<input type="checkbox" checked=""> 


(3) 省 略 属性 的 引用 符 

设置 属性 值 时 ， 可 以 使 用 双 引 号 或 单 引 号 来 引用 。HTML 5 语法 则 更 进一步 ， 只 要 属性 值 不 包含 
空格 、<、>、'、"、、= 等 字符 ， 都 可 以 省 略 属性 的 引用 符 。 代 码 如 下 。 

<!-- 请 注意 type 属性 的 引用 符 --> 

<input type="text"> 


<input type='text'> 
<input type=text> 


12.1.4 ”标签 实例 


本 节 将 通过 前 面 所 学 到 的 HTML 5 的 语法 知识 来 看 一 个 关于 HTML 5 标签 的 实例 。 
以 下 是 纯粹 的 HTML 5 文档 实例 省略 了 <html>、<head>、<body> 等 属性 ,使 用 了 HTML 5 的 doctype 
声明 , 通过 meta 元 素 的 charset 属性 设置 字符 编码 , 省 略 p 元 素 的 结束 标签 , meta 元 素 和 br 元 素 以 “/>” 


结尾 等 。 代 码 如 下 。 
[E ma P ~ Ox ED | 
这 个 HTML 是 尊 江 HTML5 语 法 | 
编写 出 来 的 。 
| 


<ldoctype html> 
<meta charset=UTF-8 /> 
图 12.1 HTML 5 标记 示例 


<title>HTML 5 标记 示例 </title> 
<p> 这 个 HTML 是 遵循 HTML 5 语法 
<br/> 编 写 出 来 的 。 


这 段 代码 在 下 9 浏览 器 中 的 运行 结果 如 
图 12.1 所 示 。 


12.2 ”新 增 的 元 素 和 废除 的 元 素 
镶 m 教学 录像 :光盘 \TMNIx12\ 新 增 的 元 素 和 废除 的 元 素 .exe 


12.2.1 新 增 的 结构 元 素 


在 HTML 5 中 ， 新 增 了 以 下 与 结构 相关 的 元 素 。 
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加 ”section 元 素 

section 元 素 定义 文档 或 应 用 程序 中 的 一 个 区 段 ， 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 它 可 
以 与 hl、h2、h3、h4、h5、h6 等 元 素 配合 使 用 ， 标 示 文 档 结 构 。 

HTML 5 中 代码 示例 。 


<section>...</section> 


HTML 4 中 代码 示例 。 


<div>...</div> 


回 article 元 素 
article 元 素 表示 文档 中 的 一 块 独立 的 内 容 ， 如 博客 或 报纸 中 的 一 篇 文章 。 
HTML 5 中 代码 示例 。 


<article>...</article> 
HTML 4 中 代码 示例 。 
<div class="article">...</div> 


加 ”header 元 素 
header 元 素 表示 页 面 中 一 个 内 容 区 块 或 整个 页 面 的 标题 。 
HTML 5 中 代码 示例 。 
<header>...</header> 
HTML 4 中 代码 示例 。 


<div>...</div> 


nav 元 素 

nav 元 素 表示 导航 链接 的 部 分 。 

HTML 5 中 代码 示例 。 

<nav>...</nav> 

HTML 4 中 代码 示例 。 

<Ul>...</ul> 

footer 元 素 

footer 元 素 表示 整个 页 面 或 页 面 中 一 个 内 容 区 块 的 脚注 。 一 般 来 说 ， 它 会 包含 创作 者 的 姓名 、 文 档 
的 创作 日 期 以 及 创建 者 的 联系 信息 。 

HTML 5 中 代码 示例 。 


<footer>...</footer> 
HTML 4 中 代码 示例 。 


<div>...</div> 
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12.2.2 ”新 增 的 块 级 的 语义 元 素 


在 HTML 5 中 ， 新 增 了 以 下 与 块 级 (block〉 的 语义 相关 的 元 素 。 

回 aside 元 素 

aside 元 素 表 示 article 元 素 的 内 容 之 外 的 与 article 元 素 的 内 容 相关 内 容 。 

HTML 5 中 代码 示例 。 

<aside>...</aside> 

HTML 4 中 代码 示例 。 

<div>...</div> 

回 figure 元 素 

figure 元 素 表示 一 段 独立 的 流 内 容 , 一般 表示 文档 主体 流 内 容 中 的 一 个 独立 单元 ,使 用 <figcaption> 
元 素 为 figure 元 素 组 添加 标题 。 

HTML 5 中 代码 示例 。 


<figure> 

<figcaption>PRC</figcaption> 

<p>The People's Republic of China was born in 1949...</p> 
</figure> 


HTML 4 中 代码 示例 。 


<dl> 

<h1>PRC</h1> 

<p>The People's Republic of China was born in 1949...</p> 
</dl> 


dialog 元 素 
dialog 标签 定义 对 话 ， 比 如 交谈 。 
HTML 5 中 代码 示例 。 


<dialog> 
<dt> 老 师 </dt> 
<dd>2+2 等 于 ? </dd> 
<dt> 学 生 </dt> 
<dd>4</dd> 
<dt> 老 师 </dt> 
<dd> 答 对 了 ! </dd> 

</dialog> 


注意 后生 不 个 于 宙 迪 所 民 于 <a 本 和 所 证 六 的 部 从 
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12.2.3 ”新 增 的 行内 的 语义 元 素 


在 HTML 5 中 ， 新 增 了 以 下 与 行内 〈inline) 的 语义 相关 的 元 素 。 

mark 元 素 

mark 元 素 主要 用 来 在 视觉 上 向 用 户 呈 现 那些 需要 突出 显示 或 高 亮 显示 的 文字 ， 其 比较 典型 的 应 用 
就 是 在 搜索 结果 中 高 亮 显示 搜索 关键 词 。 

HTML 5 中 代码 示例 。 

<mark>...</mark> 

HTML 4 中 代码 示例 。 

<span>...</span> 

回 time 元 素 

time 元 素 表示 日 期 或 时 间 ， 也 可 以 同时 表示 两 者 。 

HTML 5 中 代码 示例 。 

<time>...</time> 

HTML 4 中 代码 示例 。 


<span>...</span> 


meter 元 素 

meter 元 素 表示 度量 衡 ， 仅 用 于 已 知 最 大 值 和 最 小 值 的 度量 。 必 须 定义 度量 的 范围 ， 既 可 以 在 元 素 
的 文本 中 ， 也 可 以 在 min/max 属性 中 定义 。 

HTML 5 中 代码 示例 。 


<meter>...</meter> 


progress 元 素 

progress 元 素 表示 运行 中 的 进程 。 可 以 使 用 progress 元 素来 显示 JavaScript 中 耗费 时 间 的 函数 的 
进程 。 

HTML 5 中 代码 示例 。 


<progress>...</progress> 


12.2.4 ”新 增 的 葵 入 多 媒体 元 素 与 交互 性 元 素 


新 增 的 嵌入 多 媒体 元 素 有 video 和 audio 元 素 , 分 别 是 用 来 插入 视频 和 声音 的 。 值 得 注意 的 是 可 以 
在 开始 标签 和 结束 标签 之 间 放 置 文本 内 容 ， 这 样 旧版 本 的 浏览 器 就 可 以 显示 出 不 支持 该 标签 的 信息 。 
例如 下 面 的 代码 : 

<video src="somevideo.wmv"> 您 的 浏览 器 不 支持 video 标签 。</video> 
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元 素 提供 标题 或 图 例 ， 是 details 元 素 的 第 一 个 子 元 素 。 标 题 是 可 见 的 ， 用 
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HTML 5 从 入 门 到 精通 


HTML 5 也 叫 Web Applications 1.0， 增 加 了 details、datugrid、menu 和 command 元 素 就 是 为 了 提 


而 的 交互 能 力 。 
回 details 元 素 


details 元 素 表示 用 户 要 求 得 到 并 且 可 以 得 到 的 细节 信息 , 可 以 与 summary 元 素 配合 使 用 。summary 


]s。 


HTML 5 中 代码 示例 。 


<details><summary>HTML 5</summary> 


This document teaches you everything you have to learn about HTML 5. 


</details> 


加 ”datagrid 元 素 

datagrid 元 素 表示 可 选 数据 的 列表 ， 通 常用 于 显示 树 列表 。 
HTML 5 中 代码 示例 。 

<datagrid>...</datagrid> 


menu 元 素 
menu 元 素 表示 菜单 列表 ， 通 常用 于 列 出 表单 控件 。 
HTML 5 中 代码 示例 。 


<menu> 
<li><input type="checkbox" />Red</li> 
<li><input type="checkbox" />blue</li> 
</menu> 


和 6 注意 在 HTML4 中 不 推荐 使 用 menu 元 素 。 


command 元 素 


command 元 素 表示 命令 按钮 ， 如 单 选 按钮 、 复 选 框 或 普通 按钮 。 


HTML 5 中 代码 示例 。 


<command onclick=cut()" label="cut"> 


12.2.5 ”新 增 的 input 元 素 的 类 型 
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在 HTML 5 中 ，input 元 素 新 增 了 很 多 类 型 ， 分 别 介绍 如 下 。 
加 email 


email 类 型 用 于 应 该 包含 E-mail 地 址 的 输入 域 。 


户 单 击 标题 时 ， 就 会 显示 出 
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url 

url 类 型 用 于 应 该 包含 URL 地 址 的 输入 域 。 

number 

number 类 型 用 于 应 该 包含 数值 的 输入 域 。 

range 

range 类 型 用 于 应 该 包含 一 定 范围 内 数字 值 的 输入 域 。 
Date Pickers 〈 数 据 检 出 器 ) 

Search 
search 类 型 用 于 搜索 域 ， 如 站 点 搜索 或 Google 搜索 。search 域 显 示 为 常规 的 文本 域 。 
HTML 5 拥有 多 个 可 供 选 取 日 期 和 时 间 的 新 输入 类 型 : 

date 一 一 选取 日 、 月 、 年 。 

month 一 一 选取 月 、 年 。 

Week 选取 周 和 年 。 

time 一 一 选取 时 间 〔 小 时 和 分 钟 )。 

datetime 一 一 选取 时 间 、 日 、 月 、 年 (UTC 时 间 )。 

datetime-local 一 一 选取 时 间 、 日 、 月 、 年 (本 地 时 间 )。 


办 办 办 办 轨 


12.2.6 ”废除 的 元 素 


由 于 各 种 原因 ， 在 HTML 5 中 废除 了 很 多 元 素 ， 下 面 简单 介绍 一 下 被 废除 的 元 素 。 
1. 能 使 用 CSS 代替 的 元 素 


对 于 basefont、big、center、font、s、strike、tt、u 这 些 元 素 ， 由 于 他 们 的 功能 都 是 纯粹 为 画面 展 
示 服 务 的 , 而 在 HTML 5 中 提倡 把 画面 展示 性 功能 放 在 CSS 样式 表 中 统一 编辑 , 所 以 将 这 些 元 素 废除 ， 
并 使 用 编辑 CSS 样式 表 的 方式 进行 蔡 代 。 


2. 不 再 使 用 frame 框架 


由 于 frame 框架 对 页 面 存在 负面 影响 ， 在 HTML 5 中 已 不 再 支持 frame 框架 ， 只 支持 iframe 框架 ， 
或 者 用 服务 器 方 创建 的 由 多 个 页 面 组 成 的 复合 页 面 的 形式 ， 同 时 将 frameset、frame 与 noframes 3 个 元 
素 废除 。 


只 有 部 分 浏览 器 支持 的 元 素 


对 于 applet、bgsound、blink、marguee 等 元 素 , 由 于 只 有 部 分 浏览 器 支持 这 些 元 素 , 所 以 在 HTML 5 
中 被 废除 。 其 中 applet 元 素 可 由 embed 元 素 蔡 代 ，bgsound 元 素 可 由 audio 元 素 蔡 代 ，marquee 可 以 由 
JavaScript 编程 的 方式 替代 。 
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12.3 新 增 的 属性 和 废除 的 属性 
名 教学 录像 : 光盘 \TMNI12\ 新 增 的 属性 和 废除 的 属性 .exe 


12.3.1 ”新 增 的 属性 


1. 表单 相关 的 属性 


新 增 的 与 表单 相关 的 属性 介绍 如 下 。 
(1) autocomplete 属性 
autocomplete 属性 规定 form 或 input 域 应 该 拥有 自动 完成 功能 。 它 适用 于 <form> 标 签 ， 以 及 以 下 类 
型 的 <input> 标 签 : text、search、url、telephone、email、password、datepickers、range 以 及 color。 
(2) autofocus 属性 
autofocus 属性 规定 在 页 面 加 载 时 ， 域 自动 地 获得 焦点 。 它 适用 于 所 有 <input> 标 签 的 类 型 。 
(3) form 属性 
form 属性 规定 输入 域 所 属 的 一 个 或 多 个 表单 。 它 适用 于 所 有 <input> 标 签 的 类 型 。 
(4) 表单 重 写 属性 
表单 重 写 属性 (form override attributes) 允许 重 写 form 元 素 的 某 些 属性 设 定 。 
表单 重 写 属性 有 : 
formaction 一 一 重 写 表单 的 action 属性 。 
加 ”formenctype 一 一 重 写 表单 的 enctype 属性 。 
加 ”formmethod 一 一 重 写 表单 的 method 属性 。 
formnovalidate 一 一 重 写 表单 的 novalidate 属性 。 
加 ”formtarget 一 一 重 写 表单 的 target 属性 。 
表单 重 写 属性 适用 于 以 下 类 型 的 <input> 标 签 : submit 和 image。 
(5) height 和 width 属性 
height 和 width 属性 规定 用 于 image 类 型 的 <input> 标 签 的 图 像 高 度 和 宽度 。 它们 只 适用 于 image 类 
型 的 <input> 标 签 。 
(6) list 属性 
list 属性 规定 输入 域 的 datalistdatalist 是 输入 域 的 选项 列表 . 它 适 用 于 以 下 类 型 的 <input> 标 签 :text、 
search、url、telephone、email、datepickers、number、range 以 及 color。 
(7) min、max 和 step 属性 
min、max 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 类 型 规定 限定 (约束 )。 
回 ”max 属性 规定 输入 域 所 允许 的 最 大 值 。 
加 ”min 属性 规定 输入 域 所 允许 的 最 小 值 。 
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step 属性 为 输入 域 规定 合法 的 数字 间隔 〈 如 果 step="3"， 则 合法 的 数 是 -3、0、3、6 等 )。 
min、max 和 step 属 性 适用 于 以 下 类 型 的 <input> 标 签 : datepickers、number 以 及 range。 
(8) multiple 属性 
multiple 属性 规定 输入 域 中 可 选择 多 个 值 。 它 适用 于 以 下 类 型 的 <input> 标 签 : email 和 file。 
(9) novalidate 属性 
novalidate 属性 规定 在 提交 表单 时 不 应 该 验证 form 或 input 域 。 它 适用 于 <form> 以 及 以 下 类 型 的 
<input> 标 签 : text、search、url、telephone、email、password、datepickers、range 以 及 color。 
(10) pattern 属性 
pattern 属性 规定 用 于 验证 input 域 的 模式 (pattern ), 模式 是 正则 表达 式 。 它 适用 于 以 下 类 型 的 <input> 
标签 : text、search、url、telephone、email 以 及 password。 
(11) placeholder 属性 
placeholder 属性 提供 一 种 提示 (hint)， 描 述 输入 域 所 期 待 的 值 。 它 适用 于 以 下 类 型 的 <input> 标 签 ; 
text、search、url、telephone、email 以 及 password。 
(12) required 属性 
required 属性 规定 必须 在 提交 之 前 填写 输入 域 (不 能 为 空 )。 它 适用 于 以 下 类 型 的 <input> 标 签 : text、 


search、url、telephone、email、password、datepickers、number、checkbox、radio 以 及 file。 
2. 链接 相关 属性 


新 增 的 与 链接 相关 的 属性 如 下 。 
(1) media 属性 
为 a 与 area 元素 增加 了 media 属性 ， 该 属性 规定 目标 URL 是 为 什么 类 型 的 媒介 /设备 进行 优化 的 。 
该 属性 只 能 在 href 属性 存在 时 使 用 。 
(2) hreflang 属性 与 rel 属性 
为 area 元 素 增加 了 hreflang 属性 与 rel 属性 ， 以 保持 与 a 元素 ，link 元 素 的 一 致 。 
(3) sizes 属性 
为 link 元 素 增加 了 新 属性 sizes。 该 属性 可 以 与 icon 元 素 结合 使 用 (通过 rel 属性 ) ， 以 指定 关联 
图 标 (icon 元 素 ) 的 大 小 。 
(4) target 属性 
为 base 元 素 增加 了 target 属性 ， 主 要 目的 是 保持 与 a 元 素 的 一 致 性 ， 同 时 由 于 target 元 素 在 Web 
应 用 程序 中 ， 尤 其 是 在 与 过 ame 结合 使 用 时 ， 是 非常 有 用 的 ， 所 以 不 再 是 不 赞成 使 用 的 元 素 了 。 


3， 其 他 属性 


除了 上 面 介绍 的 与 表单 和 链接 相关 的 属性 外 ，HTML 5 还 增加 了 下 面 的 属性 。 
(1) reversed 属性 
为 ol 元 素 增加 属性 reversed， 它 指定 列表 倒序 显示 。li 元 素 的 value 属性 与 ol 元 素 的 start 属性 因 
为 不 被 显示 在 界面 上 ， 所 以 是 可 以 使 用 的 。 
(2) charset 属性 
为 meta 元 素 增加 charset 属性 , 因为 这 个 属性 已 经 被 广泛 支持 了 , 而 且 为 文档 的 字符 编码 的 指定 提 
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供 了 一 种 比较 好 的 方式 。 
(3) type 属性 与 label 属性 
为 menu 元 素 增加 了 两 个 新 的 属性 type 与 label。label 属性 为 菜单 定义 了 一 个 可 见 的 标注 ，type 属 
性 让 菜单 可 以 以 上 下 文 菜单 、 工 具 条 和 列表 菜单 3 种 形式 出 现 。 
(4) scoped 属性 
为 style 元 素 增加 scoped 属性 , 用 来 规定 样式 的 作用 范围 , 譬如 只 对 页 面 上 某 个 树 起 作用 。 为 script 
元 素 增加 async 属性 ， 它 定义 脚本 是 否 异 步 执行 。 
(5) manifest 属性 
为 html 元 素 增加 属性 manifest， 开 发 离线 Web 应 用 程序 时 它 与 API 结合 使 用 ， 定 义 一 个 URL， 
在 这 个 URL 上 描述 文档 的 缓存 信息 。 为 iframe 元 素 增加 sandbox、seamless 与 srcdoc 3 个 属性 ， 用 来 
提高 页 面 安 全 性 ， 防 止 不 信任 的 Web 页 面 执行 某 些 操作 。 


12.3.2 ”废除 的 属性 


HTML 4 中 的 一 些 属性 在 HTML 5 中 不 再 被 使 用 ， 而 是 采用 其 他 属性 或 其 他 方案 进行 替换 ， 具 体 
如 表 12.1 所 示 。 


表 12.1 在 HTML 5 中 被 废除 了 的 属性 


在 HTML 4 中 使 用 的 属性 在 HTML 5 中 的 替代 方案 
reV link、 a rel 

i 帮 坟 术 的 关中 人 有 HTTP Content-type 头 
shape、coords | 使 用 area 元 素 代 替 a 元 素 

longdesc 使 用 a 元 素 链接 到 较 长 描述 

target linxkg | 多 余 属 性 ， 被 省 略 

nohref |aca | 多 余 属 性 , 被 省 略 

profile 多 余 属 性 ， 被 省 略 

Version 多 余 属 性 ， 被 省 略 

name id 

scheme 只 为 某 个 表单 域 使 用 scheme 


使 用 data 与 type 属性 类 调用 插件 。 需 要 使 用 
这 些 属性 来 设置 参数 时 ， 使 用 param 属性 
使 用 name 与 value 属性 ， 不 声明 值 的 mime 
类 型 

使 用 以 明确 简洁 的 文字 开头 、 后 跟 详 述 文字 


archive、classid、 codebase、 
codetype、 declare、 standby 


valuetype、type 


axis、abbr 的 形式 。 可 以 对 更 详细 的 内 容 使 用 title 属性 ， 
使 单元 格 的 内 容 变 得 简短 
在 被 链接 的 资源 中 使 用 HTTP content-type 头 
scope a 
元 素 
align 二 人 div、 hl、h2 使 用 CSS 样式 表 蔡 代 
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在 HTML 4 中 使 用 的 属性 使 用 该 属性 的 元 素 


区 别 


续 表 


在 HTML 5 中 的 替代 方案 


alink、link、 text、vlink、 


background、bgcolor 全 下 CSS 样式 表 普 代 
align、bgcolor、border、 

cellpadding、cellspacing、 使 用 CSS 样式 表 替 代 
frame、rules、width 

有 的 ‘ehar sy charoff .| Coay, “thea, toot 使 用 CSS 样式 表 痊 代 
height、nowrap、valign 

align 、bgcolor 、 char 、 

charoff、height、nowrap、 使 用 CSS 样式 表 蔡 代 


valign、width 
align 、 bgcolor 、 char 、 
月 
charoff 、valig! | 和 
align 、 char 、 charoff 、 
” col、 colgroup 使 用 
valign、width 


CSS 样式 表 蔡 代 


CSS 样式 表 蔡 代 


align、 border 、hspace 、 使 用 CSS 样式 表 痊 代 
Vspace 

clear |bt ”| 使 用 Css 样式 表 痊 代 
compact、 type |oulii ”| 使 用 Css 样 式 表 痊 代 
compact |aq | 使 用 Css 样 式 表 痊 代 
compact |men | 使 用 Css 样式 表 痊 代 
width [le | 使 用 Css 样 式 表 痊 代 


align、hspace、vspace ling | 使 用 CSS 样式 表 痊 代 
align、, noshade, size、 width In | 使 用 CSS 样式 表 替 代 


align、frameborder、 
scrolling、marginwidth 


autosubmit [nm | 


12.4 全 局 属性 


全 md 教学 录像 : 光盘 \TM\Ix\12\ 全 局 属性 .exe 


属性 。 下 面 将 详细 介绍 几 个 常用 的 全 局 属性 。 


12.4.1 ”contentEditable 属性 


contentEditable 由 Microsoft 发 明 ， 经 过 反 向 工程 后 由 所 有 其 他 的 浏览 器 实现 ， 现 在 


在 HTML 5 中 ， 新 增 了 一 个 “全 局 属性 ”的 概念 。 所 谓 全 局 属性 ， 是 指 可 以 对 任何 元 素 都 使 用 的 


E 成 为 HTML 的 
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该 属性 的 主要 功能 是 允许 用 户 编 辑 元 素 中 的 内 容 ， 所 以 该 元 素 必须 是 可 以 获得 鼠标 焦点 的 元 素 ， 
而 且 在 单 击 鼠 标 后 要 向 用 户 提供 一 个 插入 符号 ,提示 用 户 该 元 素 中 的 内 容 允 许 编辑 。contentEditable 是 
一 个 布尔 类 型 属性 ， 因 此 可 以 将 其 设置 为 true 或 false。 

除 此 之 外 ， 该 属性 还 有 个 隐藏 的 inherit (继承 ) 状态 ， 属 性 为 true 时 ， 元 素 被 指定 为 允许 编辑 ; 
属性 为 false 时 ， 元 素 被 指定 为 不 允许 编辑 ， 未 指定 true 或 false 时 ， 则 由 inherit 状态 来 决定 ， 如 果 元 
素 的 父 元 素 是 可 编辑 的 ， 则 该 元 素 就 是 可 编辑 的 。 

另外 ， 除 了 contentEditable 属性 外 ， 元 素 还 具有 一 个 iscontentEditable 属性 ， 当 元 素 可 编辑 时 ， 该 
属性 为 true; 当 元 素 不 可 编辑 时 ， 该 属性 为 false。 


下 面 是 


个 使 用 contentEditable 属性 的 实例 ， 当 列表 元 素 被 加 上 contentEditable 属性 后 ， 该 元 素 就 


变 成 可 编辑 的 了 ， 实 例 代码 如 下 。 


<ldoctype 
<head> 


html > 


<meta charset="utf-8"> 
<title>contentEditable 属性 示例 </title> 


</head> 


<h2> 可 编辑 列表 </h2> 

<ul contentEditable="true"> 
<li> 列 表 元 素 1</li> 
<li> 列 表 元 素 2</li> 
<li> 列 表 元 素 3</li> 


</ul> 


运行 这 段 代 码 ， 效 果 如 图 12.2 所 示 。 


全 EEC 
可 编辑 列表 


i 
,列表 元 条 3 1 油 2 提案 3 天 价 4 国家 6 渗 6 天 7 田 


图 12.2 可 编辑 列表 示例 


在 编辑 完 元 素 中 的 内 容 后 ， 如 果 想 要 保存 其 中 的 内 容 ， 只 能 把 该 元 素 的 innerHTML 发 送 到 服务 器 


进行 保存 ， 因 


为 改变 元 素 内 容 后 该 元 素 的 innerHTML 内 容 也 会 随 之 改变 ， 目 前 还 没有 特别 的 API 来 保 


存 编辑 后 元 素 中 的 内 容 。 


12.4.2 designMode 属性 


designMode 属性 用 来 指定 整个 页 面 是 否 可 编辑 ， 当 页 面 可 编辑 时 ， 页 面 中 任何 支持 上 文 所 述 的 
contentEditable 属性 的 元 素 都 变 成 了 可 编辑 状态 .designMode 属性 只 能 在 JavaScript 脚本 里 被 编辑 修改 。 
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该 属性 有 两 个 值 一 一 “on” 与 “off”。 当 属性 被 指定 为 “on” 时 ， 页 面 可 编辑 ， 被 指定 为 “off” 时 ， 
页 面 不 可 编辑 。 使 用 JavaScript 脚本 来 指定 designMode 属性 的 方法 如 下 所 示 。 


document.designMode="on"。 


全 让 由 二 下 不 多 计 代用 designMode 属性 使 页 面 进入 编辑 状态 。 IE 9 允许 使 用 
designMode 属性 使 页 面 进入 编辑 状态 。 


12.4.3 hidden 属性 


hidden 属性 类 似 于 aria-hidden, 它 告 诉 浏览 器 这 个 元 素 的 内 容 不 应 该 以 任何 方式 显示 。 但 是 元 素 中 
的 内 容 还 是 浏览 器 创建 的 ， 也 就 是 说 页 面 装载 后 允许 使 用 JavaScript 脚本 将 该 属性 取消 ,取消 后 该 元 素 
变 为 可 见 状 态 ， 同 时 元 素 中 的 内 容 也 即时 显示 出 来 。hidden 属性 是 一 个 布尔 值 的 属性 ， 当 设 为 true 时 ， 
元 素 处 于 不 可 见 状态 ， 当 设 为 false 时 ， 元 素 处 于 可 见 状态 。 


12.4.4 ”spellicheck 属性 


spellcheck 属性 是 布尔 型 ， 它 告诉 浏览 器 检查 元 素 的 拼写 和 语法 。 如 果 没 有 这 个 属性 ， 默 认 的 状态 
表示 元 素 根据 默认 行为 来 操作 ， 可 能 是 根据 父 元 素 自己 的 spellcheck 状态 。 因 为 spellcheck 属性 属于 布 
尔 值 属性 ， 因 此 它 具 有 true 或 false 两 个 值 。 但 是 它 在 书写 时 有 一 个 特殊 的 地 方 ， 就 是 必须 明确 声明 属 
性 值 为 true 或 false， 书 写 方法 如 下 所 示 。 

<!-- 以 下 两 种 书写 方法 正确 --> 

<textarea spellcheck="true"> 

<input type="text" spellcheck="false"/> 

<!-- 以 下 书写 方法 错误 --!> 

<textarea spellcheck > 


和 6 注意 如 果 元 素 的 readOnly 属性 或 disabled 属性 设 为 true， 则 不 执行 拼写 检查 。 


该 属性 在 Opera 浏览 器 上 的 表现 形式 如 图 12.3 所 示 。 
AZ 了 王 


12.3 Opera 浏览 器 中 spellcheck 属性 示例 
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tabindex 是 一 个 旧 的 概念 ， 是 指 用 户 使 用 键盘 导航 一 个 页 面 时 《通常 使 用 Tab 键 ， 但 某 些 浏览 器 ， 
如 著名 的 Opera， 可 能 使 用 不 同 


在 站 点 中 使 


标签 页 顺序 是 


的 组 合 键 来 导航 ) ， 页 面 上 的 元 素 获得 焦点 的 顺序 。 


深度 嵌 套 的 布局 表格 来 构建 ， 这 种 方法 过 去 经 常 使 用 ， 但 如 今 用 得 很 少 了 。 默 认 的 
元 素 出 现在 标记 中 的 顺序 来 决定 的 。 


通常 只 有 链接 、 表 单元 素 和 图 像 映射 区 域 可 以 通过 键盘 获得 焦点 。 添 加 一 个 tabindex 使 得 其 他 元 
素 也 可 获得 焦点 ， 因 此 从 JavaScript 执行 fopcus0) 命 令 ， 就 可 以 把 浏览 器 的 焦点 移动 到 它们 。 这 就 会 使 得 


这 些 元 素 成 为 键盘 


聚焦 的 ， 这 可 不 是 我 们 想 要 的 结果 。 


使 用 一 个 负 整 数 允 许 元 素 通 过 编程 来 获得 焦点 ， 但 是 不 应 该 允许 使 用 顺序 聚焦 导航 来 到 达 元 素 。 
在 HTML4 中 “-1” 对 于 属性 来 说 是 一 个 无 效 的 值 ， 并 且 在 除 表 单字 段 和 链接 以 外 的 任何 元 素 上 ， 该 


其 变 得 合法 有 效 的 。 


本 章 从 总 体 上 介绍 了 HTML 5 对 HTML 4 进行 了 哪些 修改 ， 同 时 讲解 了 新 增 的 属性 及 其 用 法 ， 并 


属性 自身 也 是 无 效 的 。 然 而 它 现在 在 浏览 器 中 生效 了 ， 并 且 它 解决 了 一 个 真正 的 问题 ， 是 HTML 5 使 


12.5 小 结 


以 实例 形式 进行 详细 的 讲解 。 读 者 通过 认真 学 习 能 够 快速 掌握 HTML 5 新 增 的 属性 。 同时 也 对 HTML 5 
中 废除 的 元 素 进行 了 介绍 ， 避 免 读 者 在 开发 的 过 程 中 应 用 到 废除 的 元 素 ， 而 延长 开发 时 间 。 最 后 ， 介 


绍 了 HTMLS 


选择 题 


的 全 局 属性 ， 并 


F 对 其 进行 了 详细 的 讲解 。 


12.6 习 题 


1. HTML 5 中 新 的 标记 一 一 ContentType 表示 的 是 Ys 
A. 编码 格式 
2. 下 面 关 于 设置 编码 格式 的 语法 正确 的 是 (  )。 
A. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
B. <meta charset="UTF-8"> 
C. <meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
D. 以 上 都 错误 
3. 下 面 哪个 标记 是 不 允许 写 结束 标记 的 ? (  ) 


A. li 


B. 声明 C. 内 容 类 型 D. 以 上 都 不 是 


B. html C. disabled D. br 


4. 可 以 省 略 结束 标签 的 是 (  )。 


A.li B. head C. colgroup 
5. 下 面 哪个 元 素 是 HTML 5 新 增 的 元 素 ? 人 ) 

A.li B. iframe C. charset 
判断 题 


6. HTML 4 中 menu 元 素 被 推荐 使 用 (  ) 
7. autocomplete 适用 于 frame 框架 。 ( ) 


填空 题 


8. 从 HTML 5 开始 ， 文 件 的 字符 编码 推荐 使 用 
9. 元 素 表 示 文 档 中 的 一 块 独立 的 内 容 。 


10. HTML 5 中 新 增 的 嵌入 多 媒体 元 素 与 交互 元 素 是 和 


D. command 


D. section 


第 12 章 HTML 5 与 HTML 4 的 区 别 
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FRE 


HTML 5 的 结构 
( 铝 ! 教学 录像 ， 20 分 钟 ) 


在 HTML5 对 HTML4 所 做 的 各 种 修改 中 ,一 个 比较 重大 的 修改 就 是 为 了 使 文 
档 结 构 更 加 清晰 、 容 易 阅 读 ， 增 加 了 很 多 新 的 结构 元 素 。 本 章 将 详细 介绍 这 些 新 增 
的 结构 元 素 ， 包 括 它们 的 定义 和 使 用 方法 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


| 
六 
六 
ml 


掌握 HTML 5 中 新 增 的 主体 结构 元 素 的 定义 

掌握 HTML 5 中 新 增 的 非 主体 结构 元 素 的 定义 
掌握 HTML 5 中 新 增 的 主体 结构 元 素 的 使 用 方法 
掌握 HTML 5 中 新 增 的 非 主 体 结构 元 素 的 使 用 方法 


第 13 章 HTML 5 的 结构 


13.1 新 增 的 主体 结构 元 素 


攻 教学 录像 : 光盘 \TIM\Ix\13\ 新 增 的 主体 结构 元 素 .exe 
在 HTML 5 中 ,为 了 使 文档 的 结构 更 加 清晰 明确 ， 追 加 了 几 个 与 页 眉 、 页 脚 、 内 容 区 块 等 文档 结 
构 相 关联 的 结构 元 素 。 接 下 来 将 详细 讲解 HTML 5 中 在 页 面 的 主体 结构 方面 新 增加 的 结构 元 素 。 


13.1.1 ”article 元 素 


article 元 素 表示 文档 、 页 面 、 应 用 程序 或 站 点 中 的 自 包含 成 分 所 构成 的 一 个 页 面 的 一 部 分 ,并且 这 
部 分 专用 于 独立 地 分 类 或 复 用 ， 如 聚合 。 一 个 博客 帖子 ， 一 个 教程 ， 一 个 新 的 故事 、 视 频 及 其 脚本 ， 
都 很 好 地 符合 这 一 定义 。 

除了 内 容 部 分 ， 一 个 article 元 素 通常 有 它 自 己 的 标题 〈 通 常 放 在 一 个 header 元 素 里 面 ) ， 有 时 还 
有 自己 的 脚注 。 

例 13.1 以 博客 为 例 来 看 一 段 关于 article 元 素 的 代码 的 实例 。〈 实 例 位 置 ; 光盘 \TMNsINI3\1) 

实例 代码 如 下 所 示 。 


<article> 
<header> 
<h1> 编 程 词典 简介 </h1> 
<p> 发 表 日 期 : <time pubdate="pubdate">2011/10/11</time></p> 
</header> 
<p><b> 编 程 词典 </b>， 是 明日 科技 公司 数 百 位 程序 员 ... 〈“ 编 程 词典 ”文章 正文 ) </p> 
<footer> 
<p><small> 著 作 权 归 ** 公 司 所 有 。</small></p> 
</footer> 
</article> 
运行 这 段 代码 ， 效 果 如 图 13.1 所 示 。 
i 
&: EB oAmsU3 Lhn Pp OX|BDMmAN3 Lm x me 
编程 词典 简介 
发 表 日 期 : 2011/10/11 


编程 词典 ， 是 明日 科技 公司 数 百 位 程序 员 ... (“编程 词典 ”文章 正文 ) 
著作 相 归 w+ 公司 所 有 


13.1 article 元 素 的 实例 运行 效果 


这 个 实例 是 一 篇 讲述 编程 词典 的 博客 文章 ， 在 header 元 素 中 嵌入 了 文章 的 标题 部 分 ， 其 中 ， 文 章 
的 标题 “编程 词典 ”被 嵌 在 hl 元 素 中 ; 文章 的 发 表 日 期 被 嵌 在 p 元 素 中 ; 在 标题 下 部 的 p 元 素 中 嵌入 
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了 一 段 该 博客 文章 的 正文 ;在 结尾 处 的 footer 元 素 中 嵌入 了 文章 的 著作 权 ， 作 为 脚注 。 整 个 实例 的 内 
容 相对 比较 独立 、 完 整 ， 因 此 ， 对 这 部 分 内 容 使 用 了 article 元 素 。 

另外 article 元 素 是 可 以 嵌 套 使 用 的 ， 内 层 的 内 容 在 原则 上 需要 与 外 层 的 内 容 相关 联 。 例 如 ， 一 篇 
博客 文章 中 ， 针 对 该 文章 的 评论 就 可 以 使 用 嵌 套 article 元 素 的 方式 ， 用 来 呈现 评论 的 article 元 素 被 包 


2 


含 在 表示 整体 内 容 的 article 元 素 里 面 。 
例 13.2 下 面 看 一 个 关于 article 元 素 典 套 的 实例 。〈 实 例 位置 : 光盘 \TMNsIN13\2) 


实例 代码 如 下 所 示 。 


<article> 
<header> 
<h1> 编 程 词典 简介 </h1> 


<p> 发 表 日 期 : 
<time pubdate datetime="2010/10/09">2011/10/09</time> 


</p> 
</header> 
<p><b> 编 程 词典 </b>， 是 明日 科技 公司 研发 ... (“编程 词典 ”文章 正文 )</p> 
<section> 
<h2> 评 论 </h2> 
<article> 
<header> 


<h3> 发 表 者 : 小 米 </h3> 
<p><time pubdate datetime="2011-10-10T19:10-08:00">1 小 时 前 </time></p> 


</header> 
<p> 编 程 词典 ， 里 面 的 内 容 很 全 面 。</p> 
</article> 
<article> 
<header> 


<h3> 发 表 者 : 大 麦 </h3> 
<p><time pubdate datetime="2011-10-10T19:15-08:00">1 小 时 前 </time></p> 


</header> 
<p> 编 程 词典 个 人 版 ， 在 哪里 能 有 卖 的 啊 ! </p> 
</article> 
</section> 

</article> 

运行 这 段 代码 ， 效 果 如 图 13.2 所 示 。 

这 个 实例 为 博客 文章 添加 了 评论 内 容 , 实例 的 整体 内 容 还 是 比较 独立 、 完 整 的 , 因此 对 其 使 用 article 
元 素 。 具 体 来 说 ， 实 例 内 容 又 分 为 几 部 分 ， 文 章 标题 放 在 了 header 元 素 中 ， 文 章 正文 放 在 了 header 元 
素 后 面 的 p 元 素 中 ， 然 后 section 元 素 把 正文 与 评论 进行 了 区 分 ， 在 section 元 素 中 嵌入 了 评论 的 内 容 ， 
评论 中 每 一 个 人 的 评论 相对 来 说 又 是 比较 独立 、 完 整 的 ， 因 此 对 它们 都 使 用 一 个 article 元 素 ， 在 评论 
又 可 以 分 为 标题 与 评论 内 容 部 分 ， 分 别 放 在 header 元 素 与 p 元 素 中 。 
来 表示 插件 ， 它 的 作用 是 使 插件 看 起 来 好 像 内 嵌 在 页 面 中 一 样 。 
(实例 位 置 : 光盘 \TMIsIN13\3) 


的 article 元 素 中 ， 
另外 ，article 元 素 也 可 以 用 
例 13.3 下面 是 通过 article 元 素 表示 插件 的 实例 。 


实例 代码 如 下 所 示 。 


<article> 
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<h1> 电 子 商务 网 站 </h1> 
<object> 
<param name="allowFullScreen" value="true"> 
<embed src="z/aa.avi "width="400" height="295"></embed> 
</object> 
</article> 


运行 这 段 代 码 ， 效 果 如 图 13.3 所 示 。 


| ows Pp Ox | Sousrhm * 
编程 词典 简介 

发 表 日 期 :2011/1009 

编程 词典 ， 是 明日 科技 公司 研发 . (“编程 词典 ”文章 正文 ) 
评论 


发 表 者 : 小 米 

1 时 前 

编程 词典 ， 里 面 的 内 容 很 全 面 。 

发 表 者 : 大 去 

1 小 时 前 

编程 词典 个 人 版 ， 在 那里 能 有 去 的 啊 ! 


图 13.2 article 元 素 赚 套 博客 评论 图 13.3 应 用 article 元 素 表示 插件 的 运行 效果 
13.1.2 ”section 元 素 


section 元 素 代 表 文 档 或 应 用 程序 中 一 般 性 的 “ 段 ” 或 者 “ 节 ”。“ 段 ”在 这 里 的 上 下 文 种 ， 指 的 
是 对 内 容 按照 主题 的 分 组 ， 通 常 还 附带 标题 。 例 如 ， 书 本 的 章节 ， 带 标签 页 的 对 话 框 的 每 个 标签 页 ， 
或 者 一 篇 论文 的 编 节 号 。 网 站 的 主页 也 可 以 分 为 不 同 的 节 , 如 介绍 、 新 闻 列 表 和 联系 信息 。 一 个 section 
元 素 通常 由 内 容 及 其 标题 组 成 。 但 section 元 素 并 非 一 个 普通 的 容器 元 素 ， 当 一 个 容器 需要 被 直接 定义 
样式 或 通过 脚本 定义 行为 时 ， 推 荐 使 用 div 而 非 section 元 素 。 
section 元 素 的 作用 是 对 页 面 上 的 内 容 进 行 分 块 , 或 者 说 对 文章 进行 分 段 , 但 是 不 要 与 article 混淆 ， 
因为 article 有 着 自己 的 完整 的 、 独 立 的 内 容 。 
下 面 来 看 article 元 素 与 section 元 素 结合 使 用 的 两 个 实例 ， 以 更 好 地 理解 它们 之 间 的 区 别 。 
首先 来 看 一 个 带 有 section 元 素 的 article 元 素 实例 ， 实 例 代码 如 下 所 示 。 
<article> 
<h1> 葡 萄 </h1> 
<p><b> 葡 萄 </b>， 植 物 类 水 果 .…</p> 
<section> 
<h2> 巨 峰 </h2> 
<p> 欧 美 杂交 ， 为 四 倍 体 葡萄 品种 .…</p> 


</section> 
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<section> 
<h2> 赤 霞 珠 </h2> 
<p> 本 身 带 有 黑 加 仑 、 黑 莓 子 等 香味 …</p> 
</section> 
</article> 


运行 这 段 代码 ， 效 果 如 图 13.4 所 示 。 

上 面 的 代码 中 的 内 容 首 先是 一 段 独 立 的 、 完 整 的 内 容 ， 因 此 使 用 article 元 素 。 这 是 一 篇 关于 葡萄 
的 文章 ， 该 文章 分 为 3 段 ， 每 一 段 都 有 一 个 独立 的 标题 ， 因 此 使 用 了 两 个 section 元 素 。 这 里 需要 注意 
的 是 ， 对 文章 分 段 的 工作 也 是 使 用 section 元 素 完成 的 。 

再 来 看 一 个 包含 article 元 素 的 section 元 素 实例 ， 实 例 代 码 如 下 所 示 。 


<section> 
<h1> 水 果 </h1> 
<article> 
<h2> 苹 果 </h2> 
<p> 苹 果 ， 植 物 类 水 果 ， 多 次 花 果 .…</p> 
</article> 
<article> 
<h2> 桶 子 </h2> 
<p> 橘 子 ， 是 芸香 科 柑橘 属 的 一 种 水 果 .…</p> 
</article> 
<article> 
<h2> 香 蕉 </h2> 
<p> 香 蕉 ， 属 于 芭蕉 科 芭 蕉 属 植物 ， 又 指 其 果实 …</p> 
</article> 
</section> 


运行 这 段 代 码 ， 效 果 如 图 13.5 所 示 。 


ER i 
Er Ra 司 


下 看 (V) 收 荐 (A) 工具 (帮助 H) 


ee Er 
和 葡萄 | 
苹果 ， 禧 物 类 水 果 ， 多 次 花 果 . 
橘子 
橘子， 是 芸香 科 柑 桶 属 的 一 种 水 果 . 
香蕉 
| 理 莱 .属于 芭 若 科 芭 葵 属 植物 ， 又 指 其 果实 . 


巨峰 

欧美 杂交 ， 为 四 信 休 测 萄 品种 
亦 看 珠 

本 身 带 有 黑 加 仑 、 黑 蓄 子 等 音 昧 


图 13.4 带 有 section 元 素 的 article 元 素 示例 图 13.5 包含 article 元 素 的 section 元 素 示例 

这 个 实例 比 前 面 的 实例 复杂 了 一 些 ， 首 先 ， 它 是 一 篇 文章 中 的 一 段 ， 因 此 最 初 没有 使 用 article 元 
素 。 但 是 ， 在 这 一 段 中 有 几 块 独立 的 内 容 ， 因 此 ， 媒 入 了 几 个 独立 的 article 元 素 。 
通过 上 面 的 两 个 实例 ， 大 家 可 能 还 有 些 迷糊 ， 这 两 个 元 素 可 以 互 换 使 用 吗 ? 它们 的 区 别 到 底 是 什 
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么 呢 ? 事实 上 , 在 HTML 5 中 ，article 元 素 可 以 看 成 是 一 种 特殊 种 类 的 section 元 素 ， 它 比 section 元 素 
更 强调 独立 性 。 即 section 元 素 强调 分 段 或 分 块 ， 而 article 强调 独立 性 。 总 结 来 说 ， 如 果 一 块 内 容 相 对 


比较 独立 、 完 整 ， 应 该 使 


article 元 素 ; 但 如 果 想 将 一 块 内 容 分 成 几 段 时 


， 应 该 使 用 section 元 素 。 另 


外 需要 注意 的 是 ， 在 HTML 5 中 ，div 元 素 变 成 了 一 种 容器 ， 当 使 用 CSS 样式 的 时 候 ， 可 以 对 这 个 容 


器 进行 一 个 总 体 CSS 样式 


加 ”不 要 将 section 元 素 用 作 设 置 样式 的 页 面容 器 ， 那 是 div 元 素 的 了 


为 套 用 。 最 后 对 section 元 素 的 注意 事项 进行 总 结 。 
[ 作 。 


回 ” 当 article 元 素 、aside 元 素 或 nav 元 素 更 符合 页 面 要 求 时 ， 尽 量 不 要 使 用 section。 
不 要 为 没有 标题 的 内 容 区 块 使 用 section 元 素 。 


13.1.3 ”nav 元素 


nav 元 素 用 来 构建 导航 。 导 航 定义 为 一 个 页 面 中 (例如 ， 一 篇 文章 顶端 的 一 个 目录 ， 它 可 以 链接 到 
同一 页 面 的 锚 点 ) 或 一 个 站 点 内 的 链接 。 但 是 ， 并 不 是 链接 的 每 一 个 集合 都 是 一 个 nav， 只 需要 将 主要 
的 、 基 本 的 链接 组 放 进 nav 元 素 即 可 。 例 如 ， 在 页 脚 中 通常 会 有 一 组 链接 ， 包 括 服 务 条 款 、 版 权 声明 、 
联系 方式 等 。 对 于 这 些 footer 元 素 就 足够 放置 了 。 一 个 页 面 中 可 以 拥有 多 个 nav 元 素 ， 作 为 页 面 整 体 


或 不 同 部 分 的 导航 。 


nav 元 素 的 内 容 可 能 是 链接 的 一 个 列表 , 标记 为 一 个 无 序 的 列表 或 者 是 一 个 有 序 的 列表 。 这 里 需要 
注意 的 是 ，nav 元 素 是 一 个 包装 器 ， 它 不 会 蔡 代 ol 或 ul 元素 ， 但 是 会 包围 它 。 通 过 这 种 方式 ， 不 能 解 
释 该 元 素 的 旧版 本 的 浏览 器 将 会 显示 列表 元 素 和 列表 项 ， 并 且 显示 效果 完全 正常 。 

例 13.4 下 面 是 一 个 nav 元 素 的 使 用 实例 ， 在 这 个 实例 中 ， 一 个 页 面 由 几 部 分 组 成 ， 每 个 部 分 都 


带 有 链接 ， 但 只 将 最 主要 的 链接 放 入 了 nav 元 素 中 。 


实例 代码 如 下 所 示 。 


<body> 
<h1> 编 程 词典 简介 </h1> 
<nav> 

<ul> 


<li><a href="/"> 主 页 </a></li> 
<li><a href="/mr"> 简 介 文 档 </a></li> 


.more... 
</ul> 
</nav> 
<article> 
<header> 


<h1> 编 程 词典 功能 介绍 </h1> 


<nav> 
<ul> 


<li><a href="#gI"> 管 理 功能 </a></li> 
<li><a href="#kf"> 开 发 功能 </a></li> 
.More... 


</ul> 
</nav> 


(实例 位 置 ， 光盘 \TMN\sN13\4) 
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</header> 
<section id="rum"> 
<h1> 编 程 词典 的 入 门 模式 </h1> 
<p> 编 程 词典 的 入 门 模式 介绍 </p> 
</section> 
<section id="kf"> 
<h1> 编 程 词典 的 开发 模式 </h1> 
<p> 编 程 词典 的 开发 模式 介绍 </p> 
</section> 
.more... 
<footer> 
<p> 
<a href="?edit"> 编 辑 </a> | 
<a href="?delete"> 删 除 </a> | 
<a href="?rename"> 重 命名 </a> 
</p> 
</footer> 
</article> 
<footer> 
<p><small> 版 权 所 有 : 明日 科技 </small></p> 
</footer> 
</body> 


在 这 个 实例 中 ， 第 一 个 nav 元 素 用 


门 到 精通 


于 页 面 的 导航 ， 将 页 面 跳 转 到 其 他 页 面 上 去 〈 跳 转 到 网 站 主页 


或 开发 文档 目录 页 面 ); 第 二 个 nav 元 素 放置 在 article 元 素 中 ， 用 作 这 篇 文章 中 组 成 部 分 的 业内 导航 。 


需要 注意 的 是 ， 在 HTML 5 中 不 要 
命令 的 菜单 上 的 ， 是 一 种 交互 性 的 元 素 ， 或 者 更 确切 


13.1.4 aside 元 素 


aside 元 素 用 来 表示 当前 页 面 或 文章 的 附属 部 分 ， 


日 menu 元 素 代 蔡 nav 元 素 。 因 为 menu 元 素 是 用 在 一 系列 发 出 
程序 中 的 。 


地 说 是 使 用 在 Web 应 


也 可 以 认为 该 内 容 与 article 的 内 


容 是 分 开 独 立 的 。 


该 元 素 可 以 用 于 摘录 引用 或 边栏 这 样 的 排版 效果 ， 用 
的 主 内 容 区 分 开 来 的 其 他 内 容 。 
aside 元 素 主 要 有 以 下 两 种 使 
(1) 被 包含 在 article 元 素 中 
信息 、 名 词 解释 等 。 
例 13.5 下 面 是 一 个 在 文章 
实例 代码 如 下 所 示 。 
<body> 
<header> 
<h1> 宋 词 
</header> 


<article> 
<h1><strong> 水 调 歌 头 </strong></h1> 


方法。 


赏析 </h1> 


248 


内 部 的 aside 元 素 实 例 。 


于 广告 或 一 组 导航 元 素 ， 以 及 


于 认为 应 该 与 页 


作为 主要 内 容 的 附属 信息 部 分 ， 其 中 的 内 容 可 以 是 与 当前 文章 有 关 的 


(实例 位 置 ， 光盘 \TMNsIN13\S) 
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<p>.… 但 愿 人 长 久 ， 千 里 共 婵 娟 文章 正文 )</p> 
<aside> 
<!-- 因 为 这 个 aside 元 素 被 放置 在 一 个 article 元 素 内 部 ， 
所 以 分 析 器 将 这 个 aside 元 素 的 内 容 理解 成 是 和 article 元 素 的 内 容 相关 联 的 --> 
<h1> 名 词 解释 </h1> 
<dl> 
<dt> 宋 词 </dt> 
<dd> 词 ， 是 我 国 古代 诗歌 的 一 种 。 它 始 于 梁 代 ， 形 成 于 唐 代 而 极 盛 于 宋代 。 全 部 文章 ) </dd> 
</dl> 
<dl> 
<dt> 婵 娟 </dt> 
<dd> 美 丽 的 月 光 </dd> 
</dl> 
</aside> 
</article> 
</body> 


Er 
宋词 赏析 
水 调 歌 头 

但 原 人 长 久 ， 千 里 共 媒 如 文章 正文 ) 
名 词 解释 


宋词 
词 ， 是 我 国 古代 诗歌 的 一 种 。 它 始 于 梁 代 ， 形 成 于 唐 代 而 
极 盛 于 末代 。 (全 部 文章 ) 


境 娟 
美 而 的 月 光 


图 13.6 在 文章 内 部 的 aside 元 素 实例 


在 上 面 的 实例 中 ， 网 页 的 标题 放 在 了 header 元 素 中 ， 在 header 元 素 的 后 面 将 所 有 关于 文章 的 部 分 
放 在 了 一 个 article 元 素 中 ， 将 文章 的 正文 部 分 放 在 了 一 个 p 元 素 中 。 但 是 该 文章 中 还 有 一 个 名 词 解释 
的 附属 部 分 ， 用 来 解释 该 文章 中 的 一 些 名 词 ， 因 此 ， 在 p 元 素 的 下 部 又 放置 了 一 个 aside 元 素 ， 用 来 存 
放 名 词 解释 部 分 的 内 容 。 

(2) 在 article 元 素 之 外 使 用 ， 可 以 作为 页 面 或 站 点 全 局 的 附属 信息 部 分 。 最 典型 的 形式 就 是 侧 边 
栏 ， 其 中 的 内 容 可 以 是 友情 链接 ， 博 客 中 其 他 文章 列表 、 广 告 单 元 等 。 

下 面 这 个 实例 为 网 页 中 一 个 侧 边栏 的 友情 链接 的 实例 。 

<aside> 
<nav> 

<h2> 友 情 链 接 </h2> 

<ul> 


<li><a href="http://www.mrbccd.com"> 编 程 词典 网 </a></li> 
<li><a href="http://www.mingrisoft.com"> 明 日 科技 网 站 </a></li> 
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<li> 
<a href="http://www.mingribook.com"> 明 日 图 书 网 </a> 
< 川 > 
</ul> 
</nav> 
</aside> 


运行 这 段 代 码 ， 效 果 如 图 13.7 所 示 。 


13.7 用 aside 元 素 实现 的 侧 边 栏 实例 


该 实例 为 一 个 典型 的 网 站 “友情 链接 ”的 侧 边栏 部 分 ， 因 此 放 在 了 aside 元 素 中 ,但 是 该 侧 边栏 又 
是 具有 导航 作用 的 ， 因 此 放置 在 nav 元 素 中 。 该 侧 边栏 的 标题 是 “友情 链接 ”， 放 在 h2 元 素 中 ， 在 标 
题 之 后 使 用 了 一 个 ul 列表 ， 用 来 存放 具体 的 导航 链接 。 


13.1.5 time 元 素 


time 是 一 个 新 元 素 ， 用 于 明确 地 对 机 器 的 日 期 和 时 间 进 行 编 码 ， 并 且 以 易 读 的 方式 来 展现 它 。 

time 元 素 代 表 24 小 时 中 的 某 个 时 刻 或 某 个 日 期 ,表示 时 刻 允 许 带 时 差 。 它 可 以 定义 很 多 格式 的 日 
期 和 时 间 ， 如 下 所 示 。 

<time datetime="2011-10-12">2011 年 10 月 12 日 </time> 

<time datetime="2011-10-12">10 月 12 日 </time> 

<time datetime="1985-06-03"> 我 的 生日 </time> 

<time datetime="2011-10-12T20:00"> 今 天 晚上 8 点 吃饭 </time> 

<time datetime="2011-10-12T20:00Z"> 今 天 晚上 8 点 吃饭 </time> 

<time datetime="2011-10-12T20:00+09:00"> 现 在 是 晚上 8 点 的 美国 时 间 </time> 


time 元 素 的 机 器 可 读 部 分 通常 放 在 元 素 的 datatime 属性 中 ， 而 元 素 的 开始 标记 与 结束 标记 中 间 的 
部 分 是 显示 在 网 页 上 的 。datatime 属性 中 日 期 与 时 间 之 间 要 用 字母 “T” 分 隔 ，“T” 表 示 时 间 。 在 上 
述 所 示 的 倒数 第 二 个 时 间 实 例 中 ， 可 以 看 到 时 间 上 加 上 了 字母 “Z”， 这 表示 给 机 器 编码 时 使 用 UTC 
标准 时 间 ， 在 最 后 的 实例 中 则 加 上 了 时 差 ， 表 示 机 器 编码 为 另 一 地 区 时 间 ， 如 果 是 编码 本 地 时 间 ， 则 
不 需要 添加 时 差 。 


13.1.6 ”pubdate 属性 


pubdate 是 一 个 布尔 属性 ， 用 来 表示 这 个 特定 的 <time> 是 一 篇 <article> 或 整个 <body> 内 容 的 发 布 日 
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期 。 如 下 面 的 实例 所 示 。 


<article> 
<header> 
<h1> 明 日 科技 <time datetime=2011-10-29>10 月 29 日 </time> 的 放假 通知 </h1> 
<p> 发 布 日 期 : <time datetime=2011-10-11 pubdate>2011 年 10 月 11 日 </time></p> 


</header> 
<p> 通 知 : 由 于 公司 10 月 29 日 …… (关于 放假 的 通知 ) </p> 


</article> 


在 这 个 实例 中 ， 有 两 个 time 元 素 ， 分 别 定义 了 两 个 日 期 一 一 一 个 是 放假 的 日 期 ， 另 一 个 是 通知 发 
布 日 期 。 由 于 都 使 用 了 time 元 素 ， 所 以 需要 使 用 pubdate 属性 表明 是 哪个 time 元 素 代表 了 通知 的 发 布 


日 期 。 


13.2 ”新 增 的 非 主体 结构 元 素 


句 4 教学 录像 : 光盘 \TIM\x\13\ 新 增 的 非 主体 结构 元 素 .exe 
除了 以 上 几 个 主要 的 结构 元 素 之 外 ，HTML 5 内 还 增加 了 一 些 表示 逻辑 结构 或 附加 信息 的 非 主 体 


结构 元 素 。 下 面 分 别 来 介绍 。 


13.2.1 header 元 素 
或 页 面 内 的 一 个 内 容 


header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 


容 ， 如 搜索 表单 或 相关 的 logo 图 片 。 
E 页 面 的 开头 ， 可 以 用 如 下 所 示 的 形式 书写 页 面 的 标题 。 


区 块 的 标题 ， 但 也 可 以 包含 其 内 
很 明显 ， 整 个 页 面 的 标题 应 该 放 丰 
<header><h1> 页 面 标题 </h1></header> 
这 里 需要 强调 一 下 ， 一 个 网 页 内 并 未 限制 header 元 素 的 个 数 ， 可 拥有 多 个 ， 可 以 为 每 个 内 容 


加 一 个 header 元 素 ， 代 码 如 下 所 示 。 


加 
bb 


<header> 
<h1> 页 面 标题 </h1> 

</header> 

<article> 
<header> 
<h1> 文 章 标题 </h1> 
</header> 
<p> 文 章 正文 </p> 

</article> 
在 HTML 5 中 ， 一 个 header 元 素 通常 包括 至 少 一 个 heading 元 素 (hl~h6) ， 也 可 以 包括 hgroup、 


table、from、nav。 
2S1 
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13.2.2 ”hgroup 元 素 


hgroup 元 素 是 将 标题 及 其 子 标题 进行 分 组 的 元 素 。hgroup 元 素 通常 会 将 hl1~h6 元 素 进行 分 组 ， 例 
如 ， 一 个 内 容 区 块 的 标题 及 其 子 标题 算 一 组 。 通 常 ， 如 果 文 章 只 有 一 个 主 标题 ， 是 不 需要 hgroup 元 素 


的 ， 代 码 如 下 所 示 。 


<article> 
<header> 
<h1> 文 章 标题 </h1> 
<p><time datetime="2011-10-12">2011 年 10 月 12 日 </p> 
</header> 
<p> 文 章 正文 </p> 
</article> 


但 是 ， 如 果 文 章 有 主 标题 ， 主 标题 下 有 子 标题 ， 就 需要 使 用 hgroup 元 素 了 ， 代 码 如 下 所 示 。 


<article> 
<header> 
<hgroup> 
<h1> 文 章 主 标题 </h1> 
<h2> 文 章 子 标题 </h2> 
</hgroup> 
<p><time datetime="2011-10-12">2011 年 10 月 12 日 </p> 
</header> 
<p> 文 章 正文 </p> 
</article> 


13.2.3 footer 元 素 


footer 元 素 可 以 作为 其 父 级 内 容 区 块 或 是 一 个 根 区 块 的 脚注 。footer 通常 包括 其 相关 区 块 的 脚注 信 


息 ， 如 作者 、 相 关 阅 读 链接 及 版 权 信息 等 。 


在 HTML 5 出 现 之 前 ， 使 用 的 是 下 面 的 方式 编写 页 脚 ， 代 码 如 下 所 示 。 


<div id="footer"> 
<ul> 
<li> 版 权 信 息 </li> 
<Ii> 站 点 地 图 </li> 
<li> 联 系 方式 </li> 
</ul> 
<div> 


但 是 到 了 HTML 5 之 后 ， 不 再 使 用 该 方式 ， 而 是 使 用 更 加 语义 化 的 
所 示 。 
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<footer> 
<ul> 
<li> 版 权 信息 < 中 > 
<Ii> 站 点 地 图 </li> 
<Ii> 联 系 方式 </li> 
</ul> 
</footer> 


与 header 元 素 一 样 ， 一 个 页 面 中 也 没有 对 footer 元 素 的 个 数 的 限制 。 同 时 ， 可 以 为 article 元 素 或 
section 元 素 添加 footer 元 素 ， 如 下 面 的 两 个 实例 。 
一 个 是 在 article 元 素 中 添加 footer 元 素 的 实例 。 


<article> 
文章 内 容 
<footer> 
文章 的 脚注 
</footer> 
</article> 


一 个 是 在 section 元 素 中 添加 footer 元 素 的 实例 。 


<section> 
分 段 内 容 
<footer> 
分 段 内 容 的 脚注 
</footer> 
</section> 


13.2.4 address 元 素 


address 用 于 当前 的 <article> 或 文档 的 作者 的 详细 联系 方式 ， 但 不 是 用 于 邮政 地 址 的 一 个 通用 性 元 
素 。 联 络 细节 可 以 是 E-mail 地 址 、 邮 政 地 址 或 者 任何 其 他 形式 。 例如， 在 下 面 的 代码 中 ， 展 示 了 一 些 
博客 中 某 篇 文章 评论 者 的 名 字 及 其 在 博客 中 的 网 址 链接 。 

<address> 


<a href="http://blog.sina.com.cn/damai571">571</a> 
</address> 


13.3 小 结 


本 章 详细 介绍 了 HTML 5 中 新 增 的 结构 元 素 ， 包 括 它们 的 定义 和 使 用 方法 。 在 HTML 5 中 ， 为 了 
使 文档 的 结构 更 加 清晰 明确 ， 追 加 了 几 个 与 页 眉 、 页 脚 、 内 容 区 块 等 文档 结构 相关 联 的 结构 元 素 。 对 
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于 这 些 新 增 的 主体 结构 ， 本 章 通过 实例 对 其 进行 了 详细 的 讲解 。 与 此 同时 ，HTML 5 内 还 增加 了 一 些 
表示 逮 辑 结构 或 附加 信息 的 非 主体 结构 元 素 。 对 于 这 些 非 主体 元 素 ， 本 章 也 做 了 详细 的 讲解 。 这 些 主 
体 结构 元 素 与 非 主体 结构 元 素 ， 是 构成 整个 页 面 的 基础 ， 希 望 读者 能 认真 地 学 习 。 


13.4 习 题 
选择 题 
1， 下 面 关于 hgroup 元 素 的 作用 叙述 正确 的 是 ( 。 ) 。 
A. 编码 格式 B. 用 来 在 文档 中 呈现 联系 信息 


C. 将 标题 及 其 子 标题 进行 分 组 的 元 素 ”D. 以 上 都 正确 


2. 下 面 哪个 是 新 增 的 主体 结构 元 素 ? 《 

A. footer B. nav C. header D. 以 上 都 是 
3. 下 面 哪个 元 素 可 以 用 来 表示 插件 ? 《 ) 

A. section B. html C. nav D. article 
判断 题 


4，article 元 素 是 可 以 嵌 套 使 用 的 。 ( ) 
5. nav 元 素 可 以 用 来 构建 导航 。 ( ) 


填空 题 
6. 从 datatime 属性 中 日 期 与 时 间 之 间 要 用 字母 ”< ”分 隔 。 
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( 后 教学 录像 : 50 分 钟 ) 


在 开发 Web 应 用 程序 的 过 程 中 ， 表 单 是 页 面 上 非常 重要 的 内 容 ， 用 户 可 以 输 
入 的 大 部 分 内 容 都 是 在 表单 的 元 素 中 完成 的 ， 它 与 后 台 的 交互 在 大 多 数 情况 下 也 是 
通过 单 击 表单 中 的 按钮 来 完成 的 。 在 HTML 5 中 ， 大 大 加 强 了 有 关 表 单 的 功能 。 本 
章 将 详细 介绍 在 HTML 5 中 新 增 的 表单 元 素 、 属 性 ， 以 及 对 表单 元 素 内 容 的 有 效 性 
进行 验证 的 功能 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


MW 党 所 新 增 的 表单 元 素 的 属性 及 其 使 用 方法 
MH ”掌握 新 增 的 关于 表单 内 元 素 内 容 的 有 效 性 的 验证 方法 
”党 栓 页 面 上 新 增 及 改良 的 元 素 及 其 使 用 方法 


HTML 5 从 入 门 到 精通 


14.1 新 增 表 单元 素 与 属性 


吉 教学 录像 : 光盘 \TM\Ix\14\ 新 增 表 单元 率 与 属性 .exe 
在 创建 Web 应 用 程序 时 , 一 定 会 用 到 大 量 的 表单 元 素 。 在 HTML 5 标准 中 , 吸纳 了 Web Forms 2.0 
的 标准 ， 大 大 强化 了 表单 元 素 的 功能 ， 使 表单 的 开发 更 快捷 、 更 方便 。 


14.1.1 新 增 的 属性 


如 同 新 增 的 输入 型 控件 一 样 ， 不 管 目标 浏览 器 是 否 支持 新 增 的 特性 ， 都 可 以 放心 地 使 用 它们 ， 这 
主要 是 因为 现在 大 多 数 浏 览 器 在 不 支持 这 些 特性 时 会 直接 忽略 它们 ， 而 不 是 报错 。 下 面具 体 介绍 
HTML 5 新 增 的 特性 。 

.placeholder 属性 

当 用 户 还 没有 输入 值 时 ， 输 入 型 控件 可 以 通过 placeholder 属性 向 用 户 显示 描述 性 说 明 或 者 提示 信 

息 。 使 用 placeholder 属性 只 需要 将 说 明 性 文字 作为 该 属性 值 即 可 。 除 了 普通 的 文本 输入 框 外 ，email、 

number、url 等 其 他 类 型 的 输入 框 也 都 支持 placeholder 属性 。placeholder 属性 的 使 用 方法 如 下 所 示 。 
<label>text:<input type="text" placeholder="write me"></label> 

在 Firefox 4 等 支持 placeholder 属性 的 浏览 器 中 ， 属 性 值 会 以 浅 灰 色 的 样式 显示 在 输入 框 中 ， 当 页 


焦点 切换 到 输入 框 中 时 ， 或 者 输入 框 中 有 值 了 以 后 ， 该 提示 信息 就 会 消失 ， 如 图 14.1 所 示 。 
在 不 支持 placeholder 的 浏览 器 中 运行 时 ， 此 属性 会 被 忽略 ， 以 输入 型 控件 的 默认 方式 显示 ， 如 


图 14.2 所 示 。 


i 


3|[D 0 -lc 7][e el 


text: write me 


图 14.1 支持 placeholder 属性 的 浏览 器 运行 效果 图 14.2 不 支持 placeholder 属性 的 浏览 器 运行 效果 
类 似 地 ， 在 输入 值 的 时 候 ，placeholder 文本 也 不 会 出 现 ， 如 图 14.3 所 示 。 


€ ee ee 


C= 


图 14.3 输入 值 时 的 浏览 器 运行 效果 
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2. autocomplete 属性 

浏览 器 通过 autocomplete 属性 能 够 知晓 是 否 应 该 保存 输入 值 以 备 将 来 使 用 。 例 如 ， 不 保存 的 代码 
如 下 。 

<input type="text" name="mr" autocomplete="off' /> 

autocomplete 属性 应 该 用 来 保护 敏感 用 户 数据 ， 避 免 本 地 浏览 器 对 它们 进行 不 安全 的 存储 。 对 于 
autocomplete 属性 ， 可 以 指定 on、o 企 这 两 个 值 。 在 对 其 不 指定 值 时 ， 使 用 浏览 器 的 默认 值 。 把 该 属性 
设 为 on 时 , 可 以 显示 指定 候补 输入 的 数据 列表 。 使 用 detailst 元 素 与 list 属性 提供 候补 输入 的 数据 列表 ， 
自动 完成 时 ， 可 以 将 该 detailst 元 素 中 的 数据 作为 候补 输入 的 数据 在 文本 框 中 自动 显示 。autocomplete 
属性 的 使 用 方法 如 下 所 示 。 

<input type="text" name="mr" autocomplete="on" list="mrs"/> 

3. autofocus 属性 

给 文本 框 、 选 择 框 或 按钮 控件 加 上 该 属性 ， 当 画面 打开 时 ， 该 控件 自动 获得 光标 焦点 。 到 目前 为 
止 ， 要 做 到 这 一 点 需要 使 用 JavaScript。autofocus 属性 的 使 用 方法 如 下 所 示 。 


<input type="text" autofocus> 


一 个 页 面 上 只 能 有 一 个 控件 具有 该 属性 。 从 实际 角度 来 说 ， 请 不 要 随便 滥用 该 属性 。 


or 
索 页 面 中 的 搜索 文本 框 


4，list 属性 


在 HTML 5 中 ， 为 单行 文本 框 增加 了 一 个 list 属性 ， 该 属性 的 值 为 某 个 datalist 元 素 的 id。datalist 
元 素 也 是 HTML 5 的 新 增 元 素 ， 该 元 素 类 似 于 选择 框 〈select) ， 但 是 当 用 户 想 要 设置 的 值 不 在 选择 列 
表 之 内 时 ， 人 允许 其 自行 输入 。 该 元 素 本 身 并 不 显示 ， 而 是 当 文 本 框 获得 焦点 时 以 提示 输入 的 方式 显示 。 
为 了 避免 在 没有 支持 该 元 素 的 浏览 器 上 出 现 显示 错误 , 可 以 用 CSS 等 将 它 设 定 为 不 显示 。 list 属性 的 使 
方法 的 代码 如 下 所 示 。 


<!DOCTYPE html><head> 

<meta charset="UTF-8"> 

<title>list 属性 示例 </title> 

</head> 

text:<input type="text" name="mr list="mr"> 

<!-- 使 用 style="display:none;" 将 detalist 元 素 设 定 为 不 显示 --> 

<datalist id="greetings" style="display: none;"> 
<option value=" 明 日 科技 "> 明日 科技 </option> 
<option value=" 欢 迎 你 "> 欢迎 你 </option> 
<option value=" 你 好 "> 你 好 </option> 

</datalist> 


这 段 代 码 运行 结果 如 图 14.4 所 示 。 
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14.4 list 属性 示例 


和 注意 为 考虑 兼容 性 ， 在 不 支持 HTML 5 的 浏览 器 中 可 以 忽略 datalist 元 素 ， 以 便 正 常 输入 及 用 
脚本 编程 的 方式 对 input 元 素 执行 其 他 操作 。 


后 到 目前 为 止 ， 只 有 Opera 10 浏览 器 支持 ist 属性. 


5，min 和 max 属性 

通过 设置 min 和 max 属性 ， 可 以 将 range 输入 框 的 数值 输入 范围 限定 在 最 低 值 和 最 高 值 之 间 。 这 
两 个 特性 既 可 以 只 设置 一 个 ， 也 可 以 两 个 都 设置 ， 当 然 还 可 以 都 不 设置 ， 输 入 型 控件 会 根据 设置 的 参 
数 对 值 的 范围 做 出 相应 调整 。 例 如 ， 创 建 一 个 表示 型 大 小 的 range 控件 ， 值 范围 为 0% 一 100%， 代 码 如 
下 所 示 。 


<input id="confidence" name="mr type="range" min="0" max="100" value="0"> 


上 述 代码 会 创建 一 个 最 小 值 为 0、 最 大 值 为 100 的 range 控件 。 


CS 
” 默认 的 min 值 为 0，max 值 为 100。 


6， step 属性 

对 于 输入 型 控件 ， 设 置 其 step 属性 能 够 设 定 输入 值 递 增 或 递减 的 梯度 。 例 如 ， 按 如 下 方式 将 表示 
型 大 小 range 控件 的 step 属性 值 设置 为 5。 

<input id="confidence" name="mr" type="range" min="0" max="100" step="5" value="0"> 

设置 完成 后 , 控件 可 接受 的 输入 值 只 能 是 初始 值 与 5 的 倍数 之 和 ， 即 只 能 输入 0、5、10、.…、100， 
至 于 是 输入 框 还 是 滑动 条 输入 则 由 浏览 器 决定 。 

step 特性 的 默认 值 取决 于 控件 的 类 型 .对 于 range 控 件 ,step 默认 值 为 1. 为 了 配合 step 特 性 ,HTML 5 
引入 了 stepUp 和 stepDown 两 个 函数 ， 分 别 根据 step 特性 的 值 来 增加 或 减少 控件 的 值 ， 这 样 不 必 输 入 
就 能 够 调整 输入 型 控件 的 值 了 ， 从 而 节省 了 开发 时 间 。 

7. required 属性 


一 旦 为 某 输 入 型 控件 设置 了 required 属性 ， 那 么 此 项 必 填 ， 否 则 无 法 提交 表单 。 以 文本 输入 框 为 
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例 ， 要 将 其 设置 为 必 填 项 ， 按 照 如 下 方式 添加 required 特性 即 可 。 


<input type="text" id="firstname" name="mr' required> 


p94 
六 明 required 属性 是 最 简单 的 一 种 表单 验证 方式 。 


14.1.2 ”增加 与 改良 的 input 元 素 的 种 类 


在 HTML 5 中 , 增加 与 改良 了 input 元 素 的 种 类 , 可 以 简单 地 使 用 这 些 元 素来 实现 HTML 5 之 前 需 
要 使 用 JavaScript 才能 实现 的 许多 功能 。 
到 目前 为 止 对 于 这 些 input 的 种 类 来 说 , 支持 得 最 多 、 最 全 面 的 是 Opera 10 浏览 器 。 对 于 不 支持 
新 增 input 元 素 的 浏览 器 来 说 ， 统 一 将 这 些 input 元 素 视 为 text 类 型 。 另 外 ，HTML 5 中 也 没有 规定 这 
些 元 素 在 各 浏览 器 中 的 外 观 形式 ， 所 以 input 元 素 在 不 同 的 浏览 器 中 可 能 会 有 不 同 的 外 观 。 下 面 将 详细 
介绍 一 下 这 些 增加 与 改良 的 input 元 素 。 


1，email 输入 类 型 


email 类 型 的 input 元素 是 一 种 专门 用 来 输入 E-mail 地 址 的 文本 框 。 提 交 时 如 果 该 文本 框 中 的 内 容 
不 是 E-mail 地 址 格式 的 文字 则 不 允许 提交 ， 但 是 它 不 检查 E-mail 地 址 是 否 存在 。 和 所 有 的 输入 类 型 一 
样 ， 用 户 可 能 提交 带 有 空 字 段 的 表单 ， 除 非 该 字段 是 必 填 的 即 加 上 required 属性 。 
email 类 型 的 文本 框 具有 一 个 multiple 属性 , 它 允 许 在 该 文本 框 中 使 用 逗号 隔 开 的 有 效 E-mail 地 址 
的 一 个 列表 。 当 然 ， 这 不 是 要 求 用 户 手动 输入 一 个 逗号 隔 开 的 列表 ， 浏 览 器 可 能 使 用 复 选 框 从 用 户 的 
邮件 客户 端 或 手机 通讯 录 中 很 好 地 取出 用 户 的 联络 人 的 列表 。email 类 型 的 input 元 素 的 使 用 方法 如 下 
所 示 。 


<input type="email" name="email" value="mingrisoft@yahoo.com.cn"/> 


有 效 的 Email 地 址 :mingi@mingri.com 


无 效 的 Email 地 址 并 给 出 提示 :|E 国 
和 全 ne 企 和 


14.5 email 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 


2，url 输入 类 型 


url 类 型 的 input 元 素 是 一 种 专门 用 来 输入 url 地 址 的 文本 框 。 提 交 时 如 果 该 文本 框 中 内 容 不 是 url 
地 址 格式 的 文字 ， 则 不 允许 提交 。 例 如 ，Opera 显示 来 自用 户 的 浏览 器 历史 的 、 最 近 访 问 过 的 url 的 一 
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个 列表 ， 并 且 自 动 地 在 url 的 “www” 开 始 处 之 前 添加 “http:/”。url 类 型 的 input 元 素 的 使 用 方法 如 
下 所 示 。 
<input name="url1" type="url" value="http://www.mingribook.com" /> 
url 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 如 图 14.6 所 示 。 
EFce 局 本 


+ oD 0 mx [locahosycy 
有 效 网 址 pmp/ mingiboskesn | 
无 效 网 址 | wwwmiagribookcom 

ED [wownngroooccon an 由 


[EC To——— 


图 14.6 ”url 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 


3，data 输入 类 型 


data 输入 类 型 是 比较 受 开发 者 欢迎 的 一 种 元 素 ， 我 们 经 常会 看 到 在 网 页 中 要 求 输入 的 各 种 各 样 的 
日 期 ， 如 生日 、 购 买 日 期 、 订 票 日 期 等 。data 类 型 的 input 元 素 以 日 历 的 形式 方便 用 户 输入 。 在 Opera 
浏览 器 中 ， 当 该 文本 框 获得 焦点 时 ， 显 示 日 历 ， 可 以 在 日 历 中 选择 日 期 进行 输入 。data 类 型 的 input 元 
素 的 使 用 方法 如 下 所 示 。 

<input name="data1" type="date" value="2011-10-14"/> 


data 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 如 图 14.7 所 示 。 


和 中 司 Bt bcahosVDv| 
出 生日 期 : 
[E 5H| 


14.7 “data 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 
4. time 输入 类 型 


time 类 型 的 input 元 素 是 一 种 专门 用 来 输入 时 间 的 文本 框 , 并 且 在 提交 时 会 对 输入 时 间 的 有 效 性 进 
行 检查 。 它 的 外 观 取决 于 浏览 器 ， 可 能 是 简单 的 文本 框 ， 只 在 提交 时 检查 是 否 在 其 中 输入 了 有 效 的 时 
间 ， 也 可 以 以 时 钟 形式 出 现 ， 还 可 以 携带 时 区 。time 类 型 的 input 元 素 的 使 用 方法 如 下 所 示 。 


<input name="time1" type="time" value="10:00" /> 


time 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 如 图 14.8 所 示 。 
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和 中 可 0- | 加 友 地 localhostDY 


请 选择 时 间 : [io00 四 


图 14.8 time 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 
5. datetime 输入 类 型 


datetime 类 型 的 input 元 素 是 一 种 专门 用 来 输入 UTC 日 期 和 时 间 的 文本 框 , 并 且 在 提交 时 会 对 输入 
的 日 期 和 时 间 进 行 有 效 性 检查 。datetime 类 型 的 input 元 素 的 使 用 方法 如 下 所 示 。 
<input name="datetime1" type="datetime" /> 


datetime 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 如 图 14.9 所 示 。 


Js el 


14.9 datetime 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 
6. datetime-local 输入 类 型 


datetime-local 类 型 的 input 元 素 是 一 种 专门 用 来 输入 本 地 日 期 和 时 间 的 文本 框 , 并 且 在 提交 时 会 对 
输入 的 日 期 和 时 间 进行 有 效 性 检查 。datetime-local 类 型 的 input 元 素 的 使 用 方法 如 下 所 示 。 


<input name="datetime-local" type="datetime-local" /> 


datetime-local 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 如 图 14.10 所 示 。 


和 中 问 90- | 同志 地 [localhostD/AppSem,|| Dv| 本 Goc 5@ 


请 选择 日 期 和 时 间 : 2011-11-29 = [oo:0o 自 


图 14.10 ”datetime-local 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 
7，month 输入 类 型 


month 类 型 的 input 元 素 是 一 种 专门 用 来 输入 月 份 的 文本 框 ， 并 且 在 提交 时 会 对 输入 的 月 份 的 有 效 
性 进行 检查 。month 类 型 的 input 元 素 的 使 用 方法 如 下 所 示 。 
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<input name="month1" type="month" value="2011-10" /> 


month 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 如 图 14.11 所 示 。 
Esc J 
日 men 型 
和 路口 o 加 本 locahoryDY| 
请 选择 月 份 : 


T5910UDB 
44516081920 
了 1 了 232425 2 了 


图 14.11 month 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 

8. week 输入 类 型 

week 类 型 的 input 元 素 是 一 种 专门 用 来 输入 周 号 的 文本 框 ， 并 且 在 提交 时 会 对 输入 的 周 号 的 有 效 
性 进行 检查 。 它 可 能 是 一 个 简单 的 输入 文本 框 ， 允 许 用 户 输入 一 个 数字 ;也 可 能 更 复杂 、 更 精确 。 例 
如 ，2011-W07 代表 的 是 2011 年 第 7 个 周 。 

Opera 浏览 器 中 提供 了 一 个 辅助 输入 的 日 历 , 可 以 在 该 日 历 中 选取 日 期 , 选取 完毕 文本 框 中 自动 显 
示 周 号 。week 类 型 的 input 元 素 的 使 用 方法 如 下 所 示 。 

<input name="week1" type="week" value="2011-W10" /> 


+ mt ohoD 


请 选择 周 : 201L-W40 > 
提交 


S30311234 
56789101 
121314151617 1 
19 20 21 22 23 24 25 
26272829301 2 


图 14.12 week 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 
9. number 输入 类 型 


number 类 型 的 input 元 素 是 一 种 专门 用 来 输入 数字 的 文本 框 ， 并 且 在 提交 时 会 检查 其 中 的 内 容 是 
否 为 数字 。 它 与 min、max、step 属性 能 很 好 地 协作 。 在 Opera 中 ， 它 显示 为 一 个 微调 器 控件 ， 将 不 能 
超出 最 大 限制 和 最 小 限制 (如 果 指 定 了 的 话 ) ， 并 且 根 据 step 中 指定 的 增 量 来 增加 ， 当 然 也 可 以 输入 
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一 个 值 。number 类 型 的 input 元 素 的 使 用 方法 如 下 所 示 。 


<input name="number1" type="number value="54" min="10" max="100" step="5" /> 


number 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 如 图 14.13 所 示 。 


图 14.13 number 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 
10. range 输入 类 型 
range 类 型 的 input 元素 是 一 种 只 允许 输入 一 段 范围 内 数值 的 文本 框 , 它 具 有 min 属性 与 max 属性 ， 
可 以 设 定 最 小 值 与 最 大 值 (默认 值 为 0 与 100) ; 还 具有 step 属性 , 可 以 指定 每 次 拖 动 的 步 幅 。 在 Opera 
浏览 器 中 ， 用 滑动 条 的 方式 进行 值 的 指定 。range 类 型 的 input 元 素 的 使 用 方法 如 下 所 示 。 
<input name="range1" type="range" value="25" min="0" max="100" step="5" /> 


range 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 如 图 14.14 所 示 。 


WD per J 
EP 


请 选择 元 值 : 
EE 


ee | 
14.14 range 类 型 的 input 元 素 在 Opera 10 浏览 器 中 的 效果 
11. search 输入 类 型 


search 类 型 的 input 元 素 是 一 种 专门 用 来 输入 搜索 关键 词 的 文本 框 ， 与 text 类 型 仅仅 在 外 观 上 有 区 
别 。 在 Safari 4 浏览 器 中 ， 它 的 外 观 为 操作 系统 默认 的 圆 角 矩形 文本 框 ， 但 这 个 外 观 可 以 用 CSS 样式 
表 进 行 改写 。 在 其 他 浏览 器 中 ， 它 的 外 观 暂 与 text 类 型 的 文本 框 外 观 相同 ， 但 也 可 以 用 CSS 样式 表 进 
行 改写 ， 代 码 如 下 所 示 。 

input[type="search"]{-webkitrappearance:textfield;} 

12. tel 输入 类 型 

tel 类 型 的 input 元 素 是 用 来 输入 电话 号 码 的 专用 文本 框 。 它 没有 特殊 的 校 验 规则 ， 甚 至 不 强调 只 
输入 数字 ， 因 为 很 多 电话 号 码 常常 带 有 数字 以 外 的 字符 ， 如 44-1234567。 但 在 实际 开发 中 可 以 通过 
pattern 属性 来 指定 对 于 输入 的 电话 号 码 格式 的 验证 。 


13. color 输入 类 型 
color 类 型 的 input 元 素 用 来 选取 颜色 ， 它 提供 了 一 个 颜色 选取 器 。 目 前 ， 只 有 Black Berry 浏览 器 


而 
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支持 该 类 型 。 


14. 


1.3 output 元 素 的 添加 


output 元 素 显 示 一 些 计算 的 结果 或 者 脚本 的 其 他 结果 。output 元 素 必 须 从 属于 某 个 表单 , 也 就 是 说 ， 


必须 将 它 书写 在 表单 内 部 ， 或 对 它 添加 form 属性 。 


下 面 是 一 个 range 元 素 的 实例 ， 代 码 如 下 所 示 。 


<!IDOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title>output 元 素 示例 </title> 

</head> 

<form id="testform"> 

请 选择 一 个 数值 : 

<input name="range1" type="range" min="0" max="100" step="5"/> 
<output onforminput="value=range1.value">50</output> 

</form> 


运行 这 段 代 码 ， 效 果 如 图 14.15 所 示 。 


De [localhoeyDY 
请 选择 一 个 数值 : 英 


14.15 ”output 元 素 示例 
在 这 个 实例 中 ，output 元 素 被 绑 定 到 了 一 个 range 元 素 上 ， 当 拖 动 range 元 素 的 滑 块 时 ，output 元 


素 的 父 表单 就 会 接收 到 消息 ， 同 时 通知 output 元 素 ， 将 它 绑 定 的 元 素 range 的 值 显示 出 来 。 


全 注意 目前 只 有 Opera 10 浏览 器 支持 output 元 素 。 


14. 


1.4 ”应 用 新 增 元 素 制作 注册 表单 


例 14.1 应 用 HTML 5 的 新 增 元 素 ， 制 作 一 个 网 页 上 常用 的 简单 用 户 注册 页 面 。 在 该 例子 中 ， 综 


合 使 用 了 HTML 5 中 新 增 的 input 元 素 ， 并 对 这 些 元 素 添 加 了 必要 的 验证 属性 。《〈 实 例 位 置 :光盘 


VTMsNI4\1) 
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主要 的 代码 如 下 所 示 。 


<body> 
<h1> 注 册 表 单 </h1> 
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<form id=regForm onsubmit="return chkForm();" method="post"> 
<fieldset> 
<ol> 
<li><label for="username"> 用 户 昵称 : </label><input id="username" name="username" 
autofocus required> 
<li><label for="uemail">Email: </label><input id="uemail" type="email" name="uemail" 
required placeholder="example@domain.com"> 
<li><label for="age"> 工 作 年 龄 : </label><input id="age" type="range” name="range1" max="60" 
min="18"><output onforminput="value=range1.value">30</output> 
<li><label for="age2"> 年 龄 : </label><input id="age2" ="number required 
placeholder="your age"> 
<li><label for="birthday"> 出 生日 期 : </label><input id="birthday" type="date"> 
<li><label for="search"> 个 人 主页 : </label><input id="search" type="url" 
required list="searchlist"> 
<datalist id="searchlist"> 
<option label="Google" value="http://www.google.com" /> 
<option label="Yahoo" value="http://www.yahoo.com" /> 
<option label="Bing" value="http://www.bing.com" /> 
<option label="Baidu" value="http://www.baidu.com" /> 
</datalist></li> 
</ol> 
</fieldset> 
<div><button type="submit"> 注 册 </button> </div></form> 
</body> 


为 了 表单 样式 的 美观 ， 在 本 例 中 应 用 CSS 对 表单 的 样式 进行 了 设计 ， 有 具体 代码 可 以 参考 光盘 中 的 
程序 ， 此 例 中 的 代码 在 Opera 10 浏览 器 中 查看 时 显示 效果 最 佳 ， 运 行 效果 如 图 14.16 所 示 。 


图 14.16 注册 表单 
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14.2 ”对 表单 的 验证 


鳃 al 教学 录像 :光盘 \TMNIX14\ 对 表单 的 验证 .exe 
在 HIML 5 中， 在 增加 了 大 量 的 表单 元 素 与 属性 的 同时 ， 也 增加 了 大 量 的 在 提交 时 对 表单 与 表单 
内 新 增 元 素 进行 内 容 有 效 性 验证 的 功能 。 本 节 将 针对 这 些 验 证 功能 进行 详细 介绍 。 


14.2.1 ”自动 验证 


在 HTML 5 中 ， 可 以 实现 在 表单 提交 时 执行 自动 验证 的 功能 。 下 面 是 在 HTML 5 中 追加 的 关于 对 
元 素 内 输入 内 容 进行 限制 的 属性 的 指定 。 

1，required 属性 

required 属性 的 主要 目的 是 确保 表单 控件 中 的 值 已 填写 。 在 提交 时 ， 如 果 元 素 中 内 容 为 空白 ， 则 不 
允许 提交 ， 同 时 在 浏览 器 中 显示 信息 提示 文字 ， 提 示 用 户 该 元 素 中 必须 输入 内 容 ， 如 图 14.17 所 示 。 

2，pattern 属性 


pattern 属性 根据 表单 控件 上 设置 的 格式 规则 验证 输入 是 否 为 有 效 格式 。 对 input 元 素 使 用 pattern 
属性 ， 并 且 将 属性 值 设 为 某 个 格式 的 正则 表达 式 ， 在 提交 时 会 检查 其 内 容 是 否 符合 给 定格 式 。 当 输入 
的 内 容 不 符合 给 定格 式 时 ， 则 不 允许 提交 ， 同 时 在 浏览 器 中 显示 信息 提示 文字 ， 提 示 输 入 的 内 容 必 须 
符合 给 定格 式 。 例 如 下 面 代码 所 示 ， 要 求 输入 的 内 容 必 须 为 一 个 数字 与 三 个 大 写字 母 。 

<input pattern="[0-9][A-Z}{3}" name="mr" placeholder=" 输 入 内 容 : 一 个 数字 与 三 个 大 写字 母 。" /> 


图 14.18 为 在 Opera 浏览 器 中 pattern 属性 的 表现 形式 。 


和 路 局 ge | 时 本 地 | localhoscy|| 甩 "| 全 户 


请 输入 指定 格式 的 内 容 : 加 


| 国 向 
请 使 用 轨 求 的 格式 


al 不 是 此 页 面 请 求 的 格式 


14.17 required 属性 检查 
3，min 属性 与 max 属性 


min 与 max 这 两 个 属性 是 数值 类 型 或 日 期 类 型 的 input 元 素 的 专用 属性 ， 它 们 限制 了 在 input 元 素 
中 输入 的 数值 与 日 期 的 范围 。 图 14.19 为 在 Opera 浏览 器 中 max 属性 的 表现 形式 。 


4， step 属性 
step 属性 控制 input 元 素 中 的 值 增加 或 减少 时 的 增 量 。 例 如 ， 当 想 让 用 户 输入 的 值 0 到 100 之 间 ， 


14.18 ”patter 属性 检查 
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而 且 必须 是 5 的 倍数 时 ， 可 以 指定 step 为 5。 图 14.20 为 在 Opera 浏览 器 中 step 属性 的 表现 形式 。 
Ze 着 [ET 

日 ep 后 性 示例 

中 避 0- 加 本 起 localhos/CyUe | 只-| 位 HG 只 


Ee 和 EE 


+ 0 Bs*#e locahosycy 


8 9 


请 输入 一 个 小 于 等 于 100 的 数字 


此 表单 不 允许 数字 54。 此 输入 框 
内 多 许 特定 的 数字 。 


图 14.19 max 属性 检查 图 14.20 step 属性 检查 


14.2.2 ”checkValidity 显 式 验证 法 


除了 对 input 元 素 添加 属性 进行 元 素 内 容 有 效 性 的 自动 验证 外 ， 所 有 的 表单 元 素 和 输入 元 素 (包括 
select 和 textarea) 在 其 DOM 节点 上 都 有 一 个 checkValidity 方法 。 当 想 要 覆盖 浏览 器 的 默认 的 验证 和 


反馈 过 程 时 ， 可 以 使 用 这 个 方法 。checkValidity 方法 根据 验证 检查 成 功 与 否 ， 返 回 true 或 false， 
同时 也 会 告知 浏览 器 运行 其 检查 。 下 面 是 关于 checkValidity 方法 应 用 的 实例 ， 代 码 如 下 所 示 。 


<!IDOCTYPE html> 

<meta charset="UTF-8"/> 
<title>checkValidity 示例 </title> 
<script language="javascript"> 
function check() 


{ 


var email = document.getElementByld("email"); 
if(email.value=="™" 


alert(" 请 输入 Email 地 址 "); 
return false; 
} 
else if(lemail.checkValidity()) 
alert(" 请 输入 正确 的 Email 地 址 "); 
else 
alert(" 您 输入 的 Email 地 址 有 效 "); 
了 
</script> 
<form id="testform" onsubmit="return check();"> 
<label for="email">Email</label> 
<input name="email" id="email" type="email"/><br/> 
<input type="submit" value=" 提 交 "> 
</form> 


人 


与 此 
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除了 有 checkValidity 方法 ， 还 有 一 个 有 效 性 DOM 属性 ， 它 返回 一 个 validitystate 对 象 。 该 对 象 具 
有 很 多 属性 ， 但 最 简单 、 最 重要 的 是 valid 属性 ， 它 表示 了 表单 内 所 有 元 素 内 容 是 否 有 效 或 单个 input 
元 素 内 容 是 否 有 效 。 


14.2.3 ”避免 验证 


前 面 介绍 了 对 表单 的 验证 ， 那 么 如 果 想 要 提交 表单 ， 但 是 不 想 让 浏览 器 验证 它 ， 该 怎么 办 呢 ? 例 
如 ， 一 个 非常 大 的 表单 需要 分 成 两 部 分 (或 很 多 部 分 ) ， 在 第 二 部 分 中 有 个 文本 框 中 的 内 容 是 一 定 要 
填 的 ， 如 果 填 每 一 部 分 内 容 则 会 耗 时 较 多 ， 或 填 完 第 一 部 分 之 后 ， 第 二 部 分 要 过 一 段 时间 再 填 ， 在 这 
种 情况 下 应 该 允许 用 户 先 提交 保存 第 一 部 分 内 容 ， 但 是 同时 需要 临时 取消 第 二 部 分 的 内 容 表单 验证 。 
有 两 种 方法 取消 表单 验证 ， 第 一 种 方法 是 利用 form 元 素 的 novalidate 属性 ， 它 可 以 关闭 整个 表单 
验证 。 当 整个 表单 的 第 二 部 分 需要 验证 的 内 容 比较 多 ， 但 又 想 先 提交 表单 的 第 一 部 分 时 ， 可 以 使 用 这 
种 方法 。 先 把 属性 设 为 tue， 关 闭 表单 验证 ， 提 交 第 一 部 分 内 容 ， 然 后 在 提交 第 二 部 分 时 再 把 其 设 为 
false， 打 开 表 单 验证 ， 提 交 第 二 部 分 内 容 。 
第 二 种 方法 是 利用 input 元 素 或 submit 元 素 的 formnovalidate 属性 ,利用 input 元 素 的 formnovalidate 
可 以 让 表单 验证 对 单个 input 元 素 失效 ， 如 在 前 面 所 举例 子 中 ， 当 表单 的 第 二 部 分 中 需要 验证 的 元 素数 
量 很 少时 ， 可 以 只 利用 这 些 元 素 的 formnovalidate 属性 ， 让 表单 验证 对 这 些 元 素 失效 。 

而 如 果 对 submit 按钮 使 用 了 formnovalidate 属性 , 单 击 该 按钮 时 , 相当 于 利用 了 form 元 素 novalidate 
属性 ， 整 个 表单 验证 都 失效 了 。 


14.2.4 ”使 用 setCustomValidity 方法 自 定 义 错误 信息 


HTML 5 中 许多 新 的 input 元素 都 带 有 对 于 输入 内 容 的 有 效 性 的 检查 ， 如 果 检 查 不 通过 ， 浏 览 器 会 
针对 该 元 素 提 示 错 误 信 息 。 但 有 时 开发 者 不 想 使 用 这 些 默认 的 错误 信息 提示 ， 而 想 使 用 自己 定义 的 错 
误 信息 提示 ; 或 者 想 给 某 个 文本 框 增加 一 种 错误 信息 提示 ， 如 密码 与 确认 密码 不 一 致 时 ， 使 用 浏览 器 
错误 信息 提示 方式 。 

例 14.2 在 HTML 5 中 , 可 以 使 用 JavaScript 调用 各 input 元 素 的 setCustomValidity 方法 来 自 定义 
错误 信息 。 代 码 如 下 所 示 。 (实例 位 置 : 光盘 \TMNsI\14\2) 


<IDOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 自 定义 错误 信息 示例 </title> 

<script language="javascript"> 

function check() 

四 
var pass1=document.getElementByld("pass1"); 
Var pass2=document.getElementByld("pass2"); 
if(pass1.value!=pass2.value) 
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pass2.setCustomValidity(" 密 码 不 一 致 。"); 
else 
pass2.setCustomValidity("™"); 
var email=document.getElementByld("email"); 
if(lemail.checkValidity()) 
email.setCustomValidity(" 请 输入 正确 的 Email 地 址 。"); 
bh 
</script> 
<form id="testform" onsubmit="return check();"> 
密码 : <input type="password" name="pass1" id="pass1" /><br/> 
确认 密码 : <input type="password" name="pass2" id="pass2"/><br/> 
Email:<input type="email" name="email1" id="email"/><br/> 
<div><input type="submit" /></div> 
</form> 


这 段 代 码 运行 效果 如 图 14.21 所 示 。 


和 中 癌 9- 性 本 好 | localhosyDVA|| 用-| 使 用 G6 四 |】 


密码 : = 
确认 密码 [EE 


Ed 更 到 不 - 数 。} 


品 i 心 
14.21 Opera 10 浏览 器 中 自 定义 错误 信息 
在 这 个 实例 中 ， 追 加 了 两 种 错误 信息 提示 : 第 一 种 为 确认 密码 与 密码 不 一 致 时 ， 给 确认 密码 文本 
框 追 加 的 自 定义 错误 信息 提示 ， 浏 览 器 提供 的 确认 密码 文本 框 本 来 没有 这 项 检查 内 容 ， 第 二 种 为 浏览 
器 提供 的 E-mail 文本 框 本 来 就 有 检查 输入 的 E-mail 是 否 符合 E-mail 格式 的 功能 , 但 是 开发 者 自行 修改 
了 浏览 器 默认 的 错误 信息 提示 。 


/ 
人 培 明 Opera 是 目前 唯一 支持 自 定义 错误 信息 提示 的 浏览 器 . 


14.3 ”增加 的 页 面 元 素 


鳃 ml 教学 录像 : 光盘 \TIM\x\14\ 增 加 的 页 面 元 素 .exe 
在 HTML 5 中 ， 不 仅 增加 了 很 多 表单 中 的 元 素 ， 同 时 也 增加 和 改良 了 可 以 应 用 在 整个 页 面 中 的 元 
素 。 本 节 将 针对 这 些 元 素 进 行 介绍 。 
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14.3.1 新 增 的 fgure 元 素 


figure 元 素 代 表 一 个 块 级 图 像 ， 还 可 以 包含 说 明 。figure 元 素 不 只 可 以 显示 图 片 , 还 可 以 使 用 它 给 
audio、video、iframe、object 和 embed 元 素 添加 说 明 。figure 元 素 用 来 表示 网 页 上 一 块 独立 的 内 容 ， 
将 其 从 网 页 上 移 除 后 不 会 对 网 页 上 的 其 他 内 容 产生 任何 影响 。 

figcaption 元 素 表 示 figure 元 素 的 标题 . 它 从 属于 figure 元 素 , 所 以 其 必须 书写 在 figure 元 素 内 部 ， 
可 以 书写 在 figure 元 素 内 的 其 他 从 属 元 素 的 前 面 或 后 面 。 一 个 figure 元 素 内 最 多 只 允许 放置 一 个 
figcaption 元 素 ， 但 允许 放置 多 个 其 他 元 素 。 

下 面 是 为 一 个 不 带 标题 的 figure 元 素 实例 。 

<!IDOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title>figure 元 素 实 例 </title> 

</head> 

<figure> 

<img src="images/1.png" alt=" 明 日 科技 "> 

</figure> 


运行 这 段 代码 ， 效 果 如 图 14.22 所 示 。 


ee) 


[OO Err Er Ra 


Tn 


明日 科技 


MINGR8ISOFT 


图 14.22 不 带 标题 的 figure 元 素 实例 
下 面 是 将 上 面 实例 中 的 figure 元 素 加 上 标题 的 实例 。 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 
<title>figure 元 素 示例 </title> 
</head> 


a 


第 14 章 HTML 5 中 的 表单 


<figure> 
<img src="images/1.png" alt=" 明 日 科技 "><br> 
<figcaption> 明 日 科技 logo</figcaption> 
</figure> 


运行 这 段 代码 ， 效 果 如 图 14.23 所 示 。 


I ewanm pox 


昌 日 入 


明日 科技 loge 


图 14.23 带 标题 的 figure 元 素 示例 
14.3.2 ”新 增 的 details 元 素 


details 元 素 提 供 了 一 种 替代 JavaScript 的 方法 , 它 主要 是 提供 了 一 个 展开 /收缩 区 域 。details 元 素 的 
实例 代码 如 下 所 示 。 
<details> 
<summary> 明 日 科技 </summary> 


<p> 明 日 科技 ， 成 立 于 1998 年 .…..</p> 
</details> 


从 上 面 的 代码 中 , 可 以 看 出 summary 元 素 从 属于 details 元 素 , 用 鼠标 单 击 summary 元 素 中 的 内 容 
文字 时 ，details 元 素 中 的 其 他 所 有 从 属 元 素 将 会 展开 或 收缩 。 如 果 没 有 找到 summary 元 素 ， 浏 览 器 将 
提供 自己 默认 的 控件 文本 ， 如 details 或 一 个 本 地 化 版 本 ， 也 可 能 添加 某 种 图 标 来 表示 该 文本 是 “可 扩 
展 的 ”， 如 一 个 向 下 的 箭头 。 

details 可 以 可 选 地 接受 open 属性 ， 来 确保 页 面 载 入 时 该 元 素 是 可 打开 的 。 


<details open> 


全 
以 图 形 为 源 数据 的 一 个 表格 ， 或 者 是 提供 给 使 用 辅助 性 技术 的 用 户 的 一 个 表格 式 的 结构 说 明 。 
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14.3.3 ”新 增 的 mark 元 素 


mark 元 素 表示 页 面 中 需要 突出 显示 或 高 亮 显示 的 内 容 ,如 对 于 当前 用 户 具 有 参考 作用 的 一 段 文字 ， 
它 通常 用 于 引用 原文 的 时 候 ， 目 的 是 引起 读者 的 注意 。mark 元 素 的 作用 相当 于 用 荧光 笔 在 打印 的 纸张 
上 标 出 一 些 文字 。 它 与 强调 的 作用 略微 有 些 不 同 ， 对 于 强调 ， 我 们 使 用 <em> 标 签 来 标记 。 但 是 如 果 有 
一 些 已 有 的 文本 ， 并 且 想 要 让 文本 中 没有 强调 的 内 容 处 于 显眼 的 位 置 ， 可 以 使 用 <mark> 标 签 并 将 其 显 
示 为 斜体 等 。 

E 够 体现 mark 元 素 作用 的 最 好 的 例子 就 是 对 网 页 全 文 搜索 某 个 关键 词 时 显示 的 检索 结果 。 

例 14.3 下 面 是 一 个 在 浏览 器 中 使 用 mark 元 素 高 亮 显示 对 于 “明日 科技 ”关键 词 搜索 结果 的 实例 。 
(实例 位 置 ; 光盘 \TMNsIN14\3) 

实例 代码 如 下 所 示 。 


<!IDOCTYPE html> 
<meta charset="UTF-8" /> 
<title> mark 元 素 应 用 在 网 页 检索 时 的 示例 </title> 
<h1> 搜 索 "<mark>HTML 5</mark>", 找 到 相关 网 页 约 10,210,000 篇 ， 用 时 0.041 秒 </h1> 
<section id="search-results"> 
<article> 
<h2> 
<a href="http://developer.51cto.com/art/200907/133407.htm"> 
专题 <mark>HTML 5</mark> 下 一 代 Web 开发 标准 详解 _ 51CTO.COM - 技术 成 就 梦想 … 
</a> 
</h2> 
<p><mark>HTML 5</mark> 是 近 十 年 来 Web 开发 标准 最 巨大 的 飞跃 </p> 
</article> 
<article> 
<h2> 
<a href="http://paranimage.com/list-of-html-5/"> 
<mark>HTML 5</mark> 一 览 | 帕 兰 映像 
</a> 
</h2> 
<p><mark>html 5</mark> 最 近 被 讨论 得 越 来 越 多 ， 越 来 越 激 烈 ….</p> 
</article> 
<article> 
<h2> 
<a href="http://www.chinabyte.com/keyword/HTML+5/"> 
<mark>html 5</mark>_ 比 特 网 
</a> 
</h2> 
<p><mark>HTML 5</mark> 提 供 了 一 些 新 的 元 素 和 属性 ， 反 映 典型 .….</p> 
</article> 
<article> 
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<h2> 

<a href="http://www.slideshare.net/mienflying/html5-4921810"> 
<mark>HTML 5</mark> 表 单 

</a> 

</h2> 

<p>about <mark>HTML 5</mark> Form,the web form 2.0 tech</p> 

</article> 
</section> 


运行 这 段 代码 ， 效 果 如 图 14.24 所 示 。 

除了 在 检索 结果 中 高 亮 显示 关键 词 之 外 ，mark 元 素 的 另 一 个 主要 作用 是 在 引用 原文 的 时 候 ， 为 了 
某 种 特殊 目的 而 把 原文 作者 没有 特别 重点 表示 的 内 容 给 标示 出 来 。 

例 14.4 下 面 的 实例 中 引用 了 一 篇 关于 “明日 科技 ”的 介绍 ， 在 原文 中 并 没有 把 “编程 词典 ”标示 出 
来 ， 但 在 网 页 中 为 了 突出 “编程 词典 ”， 特 意 把 这 个 词 给 高 亮 显示 出 来 了 。 (实例 位 置 : 光盘 \TMIsN14M4) 

具体 实例 代码 如 下 所 示 。 


<!DOCTYPE html> 

<meta charset="UTF-8"/> 

<title>mark 元 素 应 用 在 文章 引用 时 的 示例 </title> 

明日 科技 : 数字 化 出 版 的 倡导 者 

<p> 

明日 科技 成 立 于 1998 年 ， 多 年 从 事 编 程 图 书 的 开发 以 及 网 站 和 程序 的 制作 。<mark> 编 程 词典 </mark>， 明 日 科技 
是 数字 化 出 版 的 先锋 ， 含 有 丰富 的 资源 。 

</p> 


运行 这 段 代 码 ， 效 果 如 图 14.25 所 示 。 


下 本 最 近 被 讨论 的 越 让 越 多 ， 越 让 越 激烈 (= 
有 此 千 I ou snn o- ox] 
明日 科技 ， 数字 化 出 版 的 倡导 省 


提供 了 一 些 打 的 元 亲属 性 ， 反 职 内 型 明日 科技 成 立 于 1998 年 ， 多 年 从 事 编 程 图 书 的 开发 以 及 网 站 和 
站 各 作出 ， 明 科技 呈 地 化 出 上 的 先 条， 全 有 让 二 


图 14.24 mark 元 素 应 用 在 网 页 检索 时 的 实例 图 14.25 mark 元 素 应 用 在 文章 引用 时 的 实例 
最 后 需要 强调 一 下 mark 和 em 或 者 strong 元 素 的 区 别 。mark 元 素 的 标记 目标 与 原文 作者 无 关 , 或 
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者 说 它 不 是 原文 作者 用 来 标示 文字 的 ， 而 是 在 后 来 引用 时 添加 上 去 的 ， 它 的 目的 是 吸引 当前 用 户 的 注 
意 力 ， 提 供给 用 户 作 参 考 ， 希 望 能 对 用 户 有 帮助 ; 而 strong 是 原文 作者 用 来 强调 一 段 文字 的 重要 性 的 ， 
如 警告 信息 、 错 误 信 息 等 ，em 元 素 是 作者 为 了 突出 文章 重点 而 使 用 的 。 


14.3.4 ”新 增 的 progress 元 素 


progress 是 HTML5 标准 草案 中 新 增 的 元 素 之 一 ， 表 示 一 个 任务 的 完成 进度 ， 这 个 进度 可 以 是 不 确 


定 的 ,只 是 表示 进度 正在 进行 , 但 是 不 清楚 还 有 多 少 工作 量 没有 完成 ,也 可 以 用 0 到 某 个 最 大 数字 〈 如 
100) 之 间 的 数字 来 表示 准确 的 进度 完成 情况 〈 如 进度 百分比 ) 。 


该 元 素 主要 有 两 个 属性 : value 属性 表示 已 经 完成 了 多 少 工作 量 , max 属性 表示 总 共有 多 少 工 作 量 。 


工作 量 的 单位 是 随意 的 ， 不 用 指定 。 


ER 


例 14.5 ”下面 是 一 个 progress 元 素 的 使 用 实例 。〈 实 例 位 置 : 光盘 \TMNsN14\S) 


<!IDOCTYPE html> 

<meta charset="UTF-8"/> 

<title>progress 元 素 的 使 用 示例 </title> 

<script> 

var progressBar = document.getElementByld('p'); 
function button_onclick() 


{ 


var progressBar = document.getElementByld('p'); 
progressBar.getElementsByTagName('span')[0].textContent ="0"; 
for(var i=0;i<=100;i++) 

updateProgress(i); 


function updateProgress(newValue) 

{ 
var progressBar = document.getElementByld('p'); 
progressBar.value = newValue; 
progressBar.getElementsByTagName('span')[0].textContent = newValue; 


</script> 

<section> 
<h2>progress 元 素 的 使 用 实例 </h2> 
<p> 完 成 百分比 : <progress id="p" max=100><span>0</span>%</progress></p> 
<input type="button" onclick="button_onclick()” value=" 请 点 击 "/> 

</section> 


运行 这 段 代码 ， 单 击 页 面 上 面 “ 请 单 击 ” 按 钮 ， 会 发 现 初始 为 0%， 变 成 了 100% 效 果 ， 如 图 14.26 


所 示 。 
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下 
去 Gamma 
此 来 的 使 用 实例 
完成 百分比 : 100% 


图 14.26 progress 元 素 的 使 用 示例 


14.3.5 ”新 增 的 meter 元 素 


meter 是 HTML 5 带 来 的 全 新 元 素 。 根据 W3C 的 定义 规范 : meter 元 素 用 来 表示 规定 范围 内 的 数量 


值 ， 如 磁盘 使 用 量 比例 、 关 键 词 匹配 程度 等 。 
需要 注意 的 是 ，meter 不 可 以 用 来 标记 那些 没有 已 知 范围 的 任意 值 ， 如 重量 、 高 
了 它们 值 的 范围 
meter 元 素 共有 6 个 属性 。 


度 ， 除 非 已 经 设 定 


回 value: 表示 当前 标量 的 实际 值 。 如 果 不 做 指定 ， 那 么 <meter> 标 签 中 的 第 一 个 数字 就 会 被 认为 
是 其 当前 实际 值 ， 如 <meter>2 out of 10</meter> 中 的 “2”， 如 果 标 签 内 没有 数字 ， 那 么 标量 的 


实际 值 就 是 0。 
min: 当前 标量 的 最 小 值 。 如 不 做 指定 则 为 0。 
四 


max: 当前 标量 的 最 大 值 。 如 不 做 指定 则 为 1; 如 果 指 定 的 最 大 值 沾 于 最 小 值 ， 那 么 最 小 值 会 


被 认为 是 最 大 值 。 


加 low: 当前 标量 的 低 值 区 。 必 须 小 于 或 等 于 标量 的 高 值 区 数字 ; 如 果 低 值 区 数字 小 于 标量 最 小 


值 ， 那 么 它 会 被 认为 是 最 小 值 。 
回 high: 当前 标量 的 高 值 区 。 


加 ”optimum: 最 佳 值 。 其 范围 在 最 小 值 与 最 大 值 区 间 当 中 ， 并 且 可 以 处 于 高 值 区 。 


meter 属性 的 使 用 方法 如 下 所 示 。 
<p> 磁 盘 使 用 量 : <meter value="50" min="0" max="160">50/160</meter>GB</p> 


xX| 


<p> 你 的 得 分 是 : <meter value="91" min="0" max="100" low="10" high="90" optimum="100">A+</meter> 


不 设 定 任何 属性 的 时 候 ， 也 可 以 使 用 百分比 及 分 数 形式 ， 例 如 : 


<meter>80%</meter> 
<meter>3/4</meter> 
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14.3.6 ”改良 的 ol 列表 


在 HTML 5 中 , 将 ol 列表 进行 了 改良 ， 为 它 添加 了 start 属性 与 reversed 属性 。 如 果 不 想 ol 元 素 所 


代表 的 列表 编号 从 1 开始 ， 那 么 可 以 使 用 start 属性 来 自 定义 编号 的 初始 值 ， 代 码 如 下 所 示 。 


<!DOCTYPE html> 

<meta charset="UTF-8"/> 
<title>ol 列表 的 star 属性 示例 </title> 
<h3>ol 列表 的 star 属性 示例 </h3> 
<ol start="5"> 

<li> 列 表 内 容 5</li> 

<li> 列 表 内 容 6</li> 

<li> 列 表 内 容 7</li> 

<li> 列 表 内 容 8</li> 

<li> 列 表 内 容 9</li> 

<li> 列 表 内 容 10</li> 


</ol> 


运行 这 段 代码 ， 效 果 如 图 14.27 所 示 。 


ol 列表 的 star 属 性 示例 


5. 列表 内 容 5 
6. 列表 内 容 6 


9 列表 内 容 9 
10. 列表 内 容 10 


图 14.27 ol 列表 的 start 属性 示例 


如 果 需 要 对 列表 进行 反 向 排序 ， 那 么 可 以 使 用 ol 列表 的 reversed 属性 ， 但 是 ， 现 在 还 没有 任何 浏 


览 器 对 该 属性 提供 支持 。 


14.3.7 ”改良 的 dl 列表 


容易 令 人 混淆 。 


在 HIML 4 中 ，dl 列表 用 于 定义 列表 ， 包 含 了 一 个 术语 及 一 个 或 多 个 定义 。 这 个 定义 不 明确 而 且 


在 HIML 5 中 ， 将 该 元 素 进行 了 重新 定义 ， 重 新 定义 后 的 dl 列表 包含 多 个 带 名 字 的 列表 项 。 每 一 


项 包含 一 条 或 多 条 带 名 字 的 dt 元 素 ， 用 来 表示 术语 ，dt 元 素 后 面 紧 跟 一 个 或 多 个 dd 元 素 ， 用 


定义 。 在 一 个 元 素 内 ， 不 允许 有 相同 名 字 的 dt 元素 ， 不 允许 有 重复 的 术语 。 
dl 列表 可 以 用 来 定义 文章 或 网 页 上 的 术语 解释 ， 其 代码 如 下 所 示 。 


<html> 
<head> 
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<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 用 于 属于 解释 的 dl 列表 示例 </title> 
</head> 
<body> 
<h3> 用 于 术语 解释 的 dl 列表 示例 </h3> 
<article> 
<h1>aritcle 元 素 </h1> 
<p> 一 块 独立 的 内 容 ， 可 以 用 来 表示 博客 中 独立 的 一 篇 文章 。。。。</p> 
<aside> 
<h2> 术 语 解释 </h2> 
<dl> 
<dt> 博 客 </dt> 
<dd> 博 客 ， 又 名 为 网 络 日 志 、 部 落 阁 等 ， 是 一 种 通常 由 个 人 管理 .….</dd> 
</dl> 
</aside> 
</article> 
</body> 
</html> 


这 段 代 码 的 运行 效果 如 图 14.28 所 示 。 


用 于 术语 解释 的 dl 列表 示例 


aritcle 元 素 


一 块 独立 的 内 容 ， 可 以 用 来 表示 博客 中 独立 的 一 篇 文章 。。。， 
术语 解释 
博 


客 
博客 ， 又 名 为 网 络 日 志 、 部 落 阁 等 ， 是 一 种 通常 由 个 人 管理 


图 14.28 用 dl 列表 来 做 术语 解释 


dl 列表 页 可 以 用 来 表示 一 些 页 面 或 article 元 素 中 内 容 的 辅助 信息 ， 如 作者 、 类 别 等 ， 代 码 如 下 
所 示 。 


<dl> 

<dt> 作 者 </dt> 
<dd> 李 慧 </dd> 
<dt> 类 别 </dt> 
<dd> 网 络 开发 </dd> 
</dl> 


14.3.8 加 以 严格 限制 的 cite 元 素 


cite 元 素 用 于 标记 作品 〈 如 一 本 书 、 一 篇 文章 和 一 首 歌曲 等 ) 的 标题 。 该 作品 可 以 在 页 面 中 被 详细 
引用 ， 也 可 以 只 在 页 面 中 提 一 下 。 
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在 HTML 4 中 ，cite 元 素 可 以 用 来 表示 作者 ， 但 是 在 HTML 5 中 明确 规定 了 不 能 用 cite 元 素 表示 
包括 作者 在 内 的 任何 人 名 , 因为 人 的 名 字 不 是 标题 (除非 标题 就 是 一 个 人 的 名 字 ), 但 是 为 了 与 HTML 4 
或 之 前 版 本 的 网 页 兼容 ， 并 没有 把 它 当做 错误 ， 所 以 这 只 是 一 个 规定 而 已 。 

下 面 是 一 个 使 用 cite 元 素 的 代码 实例 ， 代 码 如 下 所 示 。 


<!DOCTYPE html> 

<meta charset="UTF-8"/> 

<title>cite 元 素 示例 </title> 

<h3>cite 元 素 示 例 </h3> 

<p> 我 最 喜欢 的 电影 是 一 部 法 国电 影 <cite> 放 牛 班 的 春天 </cite>。</p> 


这 段 代 码 的 运行 效果 如 图 14.29 所 示 。 
LA 


cite 元 素 示例 
我 最 喜欢 的 电影 是 一 部 法 国电 影 区 估 歼 艇 章 无, 


= | 一 ”一 


图 14.29 cite 元 素 示例 
14.3.9 重新 定义 的 small 元 素 


small 元 素 已 经 完全 重新 定义 了 ， 从 仅仅 是 一 个 通用 的 表现 性 元 素 ， 变 成 了 使 得 文本 显示 得 较 小 ， 
实际 上 表示 “附属 细则 ”， 它 通常 用 来 免责 、 警 告 、 提 出 法 律 限制 或 版 权 。 附 属 细 则 有 时 候 也 用 于 表 
明 权限 ， 用 于 满足 许可 性 需求 ， 同 时 不 允许 被 应 用 在 页 面 主 内 容 中 ， 只 允许 被 当做 辅助 信息 用 inline 
方式 内 嵌 在 页 面 上 使 用 。small 元 素 并 不 意味 着 元 素 中 内 容 字 体会 变 小 ， 如 果 需 要 将 字体 变 小 ， 需 要 配 
合 着 CSS 样式 表 来 使 用 。 


14.4 小 结 


HTML 5 表单 极 大 地 提高 了 开发 者 的 工作 效率 ,并 给 用 户 带 来 了 一 些 新 的 体验 。HTML 5 提供 了 很 
多 可 以 直接 使 用 的 功能 , 而 以 前 需要 大 量 的 定制 代码 才能 实现 这 些 功 能 (如 表单 验证 、 创 建 滑 块 控件 ) 。 
熟练 掌握 本 章 中 表单 新 增 的 属性 ， 可 以 减少 程序 的 开发 时 间 ， 创 建 出 更 简洁 更 新 颖 的 表单 ， 进 而 实现 
Web 程序 开发 。 
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14.5 习 题 


选择 题 

1. email 类 型 的 文本 框 具有 一 个 multiple 属性 ， 它 的 作用 是 hs 
A. 判断 该 文本 框 中 输入 的 值 ， 是 否 为 正确 的 邮箱 地 址 
B. 不 允许 该 文本 框 为 空 
C. 允许 在 该 文本 框 中 使 用 逗号 隔 开 的 有 效 E-mail 地 址 的 一 个 列表 
D. 以 上 都 不 正确 


2. 下 面 用 来 输入 UTC 日 期 和 时 间 的 文本 框 是 (  )。 

A. data B. datatime C. time D. datetime-local 
3. 下 面 哪个 元 素 可 以 用 来 表示 警告 信息 、 错 误 信息 ? (  ) 

A. strong B. em C. mark D. 以 上 都 可 以 
判断 题 


4. step 特性 的 默认 值 取决 于 控件 的 类 型 。 对 于 range 控件 ，step 默认 值 为 5S。 2 
5. pattern 属性 主要 目的 是 根据 表单 控件 上 设置 的 格式 规则 验证 输入 是 否 为 有 效 格式 。 


( 


) 
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( 名 教学 录像 ，40 分 钟 ) 


在 HTML 5 中 新 增 了 两 个 与 表单 元 素 相 关 的 API 一 一 文件 APl 和 拖 放 API。 拖 
放 API 可 以 实现 一 些 有 趣 的 功能 , 允许 我 们 抱 动 选项 并 将 其 放置 到 浏览 器 中 的 任何 
地 方 。 这 很 好 地 体现 了 HTML 5 作为 Web 应 用 程序 规范 的 思路 ， 使 得 开发 者 可 以 
从 束 面 计算 中 借用 更 多 的 功能 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 

Wm 掌握 file 对 象 与 FileList 对 象 的 使 用 方法 

吕 ” 掌 握 blob 对 象 的 概念 及 其 使 用 方法 

MW 掌握 FileReader 接口 的 方法 、 事 件 定义 、 事 件 触 发 条 件 

MH ”掌握 利用 拖 放 API 使 页 面 中 的 元 素 可 以 互相 拖 放 的 方法 

让 掌握 dataTransfer 对 象 的 属性 及 其 使 用 方法 
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15.1 选择 文件 


健 教学 录像 : 光盘 \TIM\Ix\15\ 选 择 文件 .exe 

在 HTML 5 里， 从 Web 网 页 上 访问 本 地 文件 系统 变 得 十 分 简单 ， 那 就 是 使 用 文件 API。 这 个 File 
规范 说 明 里 提供 了 一 个 API 来 表现 Web 应 用 里 的 文件 对 象 ， 你 可 以 通过 编程 来 选择 它们 , 访问 它们 的 
信息 。 关 于 文件 API， 到 目前 为 止 只 有 部 分 浏览 器 对 它 提供 支持 ， 如 最 新 版 的 Firefox 浏览 器 。 


15.1.1 ”通过 file 对 象 选 择 文件 


FileList 对 象 表示 用 户 选择 的 文件 列表 。 在 HTML 4 中 ，file 控件 内 只 允许 放置 一 个 文件 ， 但 是 到 
了 HTML 5 中 , 通过 添加 multiple 属性 , 在 file 控件 内 允许 一 次 放置 多 个 文件 。 控 件 内 的 每 一 个 用 户 选 
择 的 文件 都 是 一 个 file 对 象 ， 而 FileList 对 象 则 为 这 些 file 对 象 的 列表 ， 代 表 用 户 选择 的 所 有 文件 。file 
对 象 有 两 个 属性 , name 属性 表示 文件 名 , 不 包括 路 径 ; lastModifiedDate 属性 表示 文件 的 最 后 修改 日 期 。 

例 15.1 下 面 是 一 个 使 用 FileList 对 象 与 file 对 象 的 实例 。 在 本 例 中 通过 单 击 “ 浏 览 ”按钮 ， 选 择 
要 上 传 的 文件 ， 然 后 单 击 “ 上 传 文件 ”按钮 ， 将 会 弹出 一 个 对 话 框 ， 在 这 个 对 话 框 中 将 显示 上 传 文件 
的 名 称 。《〈 实 例 位 置 : 光盘 \TMNsINIS\1) 

本 例 实现 的 主要 代码 如 下 所 示 。 


<IDOCTYPE html> 

<head> 

<meta charset="UTF-8"> 
<title>FileList 与 file 示例 </title> 
</head> 

<script language="javascript"> 
function ShowName() 


{ 
var file; 
for(var i=0;i<document.getElementByld("file").files.length;i++) // 返 回 FileList 文件 列表 对 象 
file = document.getElementByld("file").files[j]; /file 对 象 为 用 户 选择 的 单个 文件 
alert(file.name); // 弹 出 文件 名 
} 
bh 
</script> 
选择 文件 : 


<input type="file" id="file" multiple size="50"/> 
<input type="button" onclick="ShowName();" value=" 上 传 文件 "/> 


本 实例 的 运行 效果 如 图 15.1 所 示 。 


281 


HTML 5 从 入 门 到 精通 


15.1 应 用 FileList 对 象 与 file 对 象 的 示例 


15.1.2 ”使 用 blob 接口 获取 文件 的 类 型 与 大 小 


blob 表示 二 进 制 原始 数据 ， 它 提供 了 一 个 slice 方法 ， 可 以 通过 该 方法 访问 到 字 节 内 部 的 原始 数据 
块 。blob 对 象 有 两 个 属性 : size 属性 表示 一 个 blob 对 象 的 字 节 长 度 ; type 属性 表示 blob 的 MIME 类 型 。 
如 果 是 未 知 类 型 ， 则 返回 一 个 空 字 符 串 。 

下 面 通过 一 个 实例 对 blob 对 象 的 两 个 属性 进行 详细 介绍 。 

例 15.2 首先 单 击 “ 浏 览 ” 按 钮 选择 文件 ， 然 后 单 击 “ 显 示 文件 信息 ”按钮 ， 在 页 面 中 将 显示 浏 
览 文件 的 文件 长 度 与 文件 类 型 。 (实例 位 置 ， 光盘 \TMNsIN1S\2) 

本 例 实现 的 代码 如 下 所 示 。 


<IDOCTYPE html> 
<head> 
<meta charset="UTF-8"> 
<title>blob 对 象 使 用 示例 </title> 
<script language="javascript"> 
function ShowFileType() 
四 
var file; 
file = document.getElementByld("file").files[0]; // 得 到 用 户 选择 的 第 一 个 文件 
var size=document.getElementByld("size"); 
size.innerHTML=file.size; // 显 示 文 件 字 节 长 度 
var type=document.getElementByld("type"); 
type.innerHTML=file.type; // 显 示 文件 类 型 
b 
</script> 
选择 文件 : 
<input type="file" id="file" /> 
<input type="button" value=" 显 示 文件 信息 " onclick="ShowFileType();"/><br/> 
文件 字 节 长 度 :<span id="size"></span><br/> 
文件 类 型 : <span id="type"></span> 
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运行 这 段 代 码 ， 效 果 如 图 15.2 所 示 。 


选择 文件 CEESETT 避 | 


文件 守 节 长 度 :56874 
文件 类 


类 型 ，inageyjpee 


图 15.2 blob 对 象 及 两 个 属性 的 应 用 示例 


对 于 图 像 类 型 的 文件 ，blob 对 象 的 type 属性 都 是 以 “image/” 开 头 的， 后 六 


面 紧 跟 着 图 像 的 类 型 ， 


利用 此 特性 可 以 在 JavaScript 中 判断 用 户 选 择 的 文件 是 否 为 图 像 文件 ,如 果 在 批量 上 传 时 ， 只 允许 上 传 
图 像 文件 ， 可 以 利用 该 属性 ， 如 果 用 户 选 择 的 多 个 文件 中 有 不 是 图 像 的 文件 时 ， 会 弹出 错误 提示 信息 ， 


并 停止 后 面 的 文件 上 传 ， 或 者 跳 过 这 个 文件 ， 不 将 该 文件 上 传 。 
15.1.3 ”通过 类 型 过 滤 选 择 的 文件 


下 面 是 对 图 像 类 型 判断 的 实例 。 


例 15.3 在 该 实例 中 首先 对 上 传 的 文件 进行 判断 ， 如 果 上 传 的 文件 不 是 图 像 文 件 将 弹出 对 话 框 给 


出 提示 ， 如 果 是 图 像 文件 则 显示 文件 可 以 上 传 。《〈 实 例 位 置 ， 光盘 \TMNsIN1S\3) 
本 例 实 现代 码 如 下 所 示 。 


<!IDOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title>blob 对 象 的 type 属性 利用 示例 </title> 
<script language="javascript"> 

function FileUpload() 


‘ 
var file; 
for(var i=0;,i<document.getElementByld("file").files.length;i++) 
{ 
file = document.getElementByld("file").files[i]; 
if(VimageV\w+/.test(file.type)) 
alert(file.name+" 不 是 图 像 文 件 !"); 
break; 
} 
else 
alert(file.name+" 文 件 可 以 上 传 ”); 
} 
} 
} 
</script> 


选择 文件 : 
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<input type="file" id="file" multiple/> 
<input type="button" value=" 文 件 上 传 " onclick="FileUpload();"/> 


本 例 运行 效果 如 图 15.3 所 示 。 


图 15.3 应 用 blob 对 象 的 type 属性 对 上 传 文件 进行 判断 


另外 ，HTML 5 中 已 经 对 file 控件 添加 了 accept 属性 ， 目 的 就 是 让 file 控件 只 能 接受 某 种 类 型 的 文 


件 ， 但 是 目前 各 主流 浏览 器 对 其 的 支持 都 只 限于 在 打开 文件 选择 窗口 时 ， 默 认 选 择 图 像 文 件 而 已 ， 如 
果 选 择 其 他 类 型 文件 ，file 控件 也 能 正常 接受 。 


对 file 控件 使 用 accept 属性 的 方法 如 下 所 示 。 
<input type="file" id="file" accept="image/” /> 
图 15.4 为 目前 Firefox 浏览 器 对 file 控件 的 accept 属性 的 支持 情况 ， 其 他 浏览 器 与 此 类 似 。 


上 


en >ezaol wo E77 


2011/10/8 9:16 
2011/10/8 16:02 
2011/10/13 14:27 
2011/1121 12:56 
2011/1/19 16:58 
201M1U8 10:12 
201W/1/14 16:26 
2011M1UM12 14:34 
20111119 934 


图 15.4 目前 Firefox 浏览 器 对 file 控件 的 accept 属性 的 支持 情况 
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1$.2 ”使 用 FileReader 接口 读 取 文件 


分 教学 录像 : 光盘 \TM\Ix\15\ 使 用 FileReader 接口 读 取 文件 .exe 
FileReader 接口 主要 用 来 把 文件 读 入 内 存 ， 并 且 读 取 文 件 中 的 数据 。FileReader 接口 提供 了 一 个 异 
步 API， 使 用 该 API 可 以 在 浏览 器 主线 程 中 异步 访问 文件 系统 ， 读 取 文 件 中 的 数据 。 


15.2.1 ”检测 浏览 器 是 否 支持 FileReader 接口 


检测 一 个 浏览 器 是 否 支持 FileReader 接口 很 容易 。 因 为 支持 这 一 接口 的 浏览 器 有 一 个 位 于 Windows 
对 象 下 的 FileReader 构造 函数 , 如 果 浏 览 器 有 这 个 构造 函数 , 那么 就 可 以 新 建 一 个 FileReader 的 实例 来 
使 用 。 
if ( typeof FileReader == 'undefined' ) 


alert( "您 的 浏览 器 未 实现 FileReader 接口 " ); 


else 


var reader = new FileReader(); /正常 使 用 浏览 器 


15.2.2 ”FileReader 接口 的 方法 


FileReader 的 接口 拥有 4 个 方法 ， 其 中 3 个 用 来 读 取 文件 ， 另 一 个 用 来 读 取 中 断 ， 具 体 表 15.1 所 
示 。 需 要 注意 的 是 ， 无 论 读 取 是 否 成 功 ， 方 法 并 不 会 返回 读 取 结果 ， 而 是 将 其 存储 在 result 属性 中 。 


表 15.1 FileReader 接口 的 方法 


方 法 描述 
abort 中 断 读 取 
readAsBinaryString 将 文件 读 取 为 二 进 制 码 
readAsDataURL 将 文件 读 取 为 DataURL 
readAsText 将 文件 读 取 为 文本 
回 readAsBinaryString: 该 方法 将 文件 读 取 为 二 进 制 字符 串 ， 通 常 将 它 传送 到 后 端 ， 后 端 可 以 通 
过 这 段 字符 串 存 储 文件 。 


回 readAsDataURL 该 方法 将 文件 读 取 为 一 段 以 data 开头 的 字符 串 ， 这 段 字符 串 的 实质 就 是 Data 
URL， 即 一 种 将 小 文件 直接 嵌入 文档 的 方案 。 这 里 的 小 文件 通常 是 指 图 像 与 html 等 格式 的 
文件 。 
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回 readAsText: 该 方法 有 两 个 参数 ， 其 中 第 二 个 参数 是 文本 的 编码 方式 ， 默 认 值 为 UTF-8。 这 个 
方法 非常 容易 理解 ， 将 文件 以 文本 方式 读 取 ， 读 取 的 结果 即 是 这 个 文本 文件 中 的 内 容 。 


15.2.3 ”使 用 readAsDataURL 方法 预览 图 片 


本 节 中 将 介绍 如 何 使 用 FileReader 接口 的 readAsDataURL 方法 实现 图 片 的 预览 。 
例 15.4 在 本 例 中 通过 单 击 “ 浏 览 ”按钮 ， 选 择 要 预览 的 图 片 ， 然 后 单 击 “ 读 取 图 像 ” 按 钮 。 预 
览 的 图 片 将 在 页 面 中 显示 。 实 例 位 置 . 光盘 \TM\sI\15\4) 

本 例 实现 的 具体 步骤 如 下 。 
首先 ， 创 建 html 部 分 ， 主 要 包括 两 个 input 和 一 个 用 来 呈现 结果 的 div， 代 码 如 下 所 示 。 
<p> 

<label> 请 选择 一 个 文件 : </label> 

<input type="file" id="file" /> 

<input type="button" value=" 读 取 图 像 " onclick="readAsDataURL()"/> 
</p> 
<div name="result" id="result"> 

<!-- 这 里 用 来 显示 读 取 结 果 --> 

</div> 


其 次 ,检测 浏览 器 是 否 支持 FileReader 接口 ,对 于 不 支持 FileReader 接口 的 浏览 器 将 给 出 一 个 提示 ， 
代码 如 下 所 示 。 


if (typeof FileReader == 'undefined' ) 


result.innerHTML = "<p> 抱 歉 ， 你 的 浏览 器 不 支持 FileReader</p>"; 
file.setAttribute( 'disabled','disabled' ); 
} 


最 后 ， 书 写 函 数 readFile 的 代码 ， 当 fle input 的 onclick 事件 触发 时 ， 调 用 这 个 函数 ， 首 先 获取 到 
file 对 象 ， 并 通过 file 的 type 属性 来 检验 文件 类 型 ， 这 里 只 允许 选择 图 像 类 型 的 文件 。 然 后 创建 一 个 
FileReader 实例 ， 并 且 调 用 readAsDataURL 方法 读 取 文 件 ， 在 实例 的 onload 事件 中 ， 获 取 到 成 功 读 取 
到 的 文件 内 容 ， 并 以 插入 一 个 img 节点 的 方式 ， 显 示 在 页 面 中 ， 代 码 如 下 所 示 。 


function readFile () 


{ 


var file = document.getElementByld("file").files[0]; // 检 查 是 否 为 图 像 文 件 
if(VimageV\w+/.test(file.type)) 


alert(" 请 确保 文件 为 图 像 类 型 "); 
return false; 
} 
var reader = new FileReader(); 
reader.readAsDataURL (file); // 将 文件 以 Data URL 形式 读 入 页 面 
reader.onload = function(e) 


{ 
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var result=document.getElementByld("result"); 
result.innerHTML = '<img src="+this.result+" alt=""/>" /在 页 面 上 显示 文件 


} 
) 
运行 这 个 实例 ， 效 果 如 图 15.5 所 示 ， 单 击 “浏览 ”按钮 ， 选 择 要 显示 的 图 片 ， 然 后 单 击 “ 读 取 图 
像 ”按钮 ， 浏 览 器 中 将 显示 所 选择 的 图 片 ， 运 行 效果 如 图 15.6 所 示 。 


[cj]| 力 -coooe 


请 选择 一 个 文件 ， D: Urldvinages\l.png [如 | (这 取 图 各 
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rn 
明日 科技 


MINGRI8ESOFT 


e310 remot -| cs. PIA 加: 


请 选择 一 个 文件 。 D0;\ne\i4\inages\l.pne [ 济 s5] [这 生生 


图 15.5 读 取 图 像 文 件 效果 图 156 显示 读 取 的 图 像 
15.2.4 ”使 用 readAsText 方法 读 取 文 本 文件 


本 节 中 将 介绍 如 何 使 用 FileReader 接口 的 readAsText 方法 实现 文本 文件 的 预览 。 
例 15.5 在 本 例 中 通过 单 击 “ 浏 览 ” 按 钮 ， 选 择 要 浏览 的 文本 文件 ， 然 后 单 击 “ 读 取 文本 文件 ” 
按钮 ， 文 本 文件 的 内 容 将 在 页 面 中 显示 。 (实例 位 置 : 光盘 \TMNsIN1S\S) 

本 例 实 现 的 具体 步骤 如 下 。 
首先 ， 创 建 html 部 分 ， 主 要 包括 两 个 input 元 素 和 一 个 用 来 呈现 结果 的 div 元 素 ， 代 码 如 下 所 示 。 
<p> 

<label> 请 选择 一 个 文件 : </label> 

<input type="file" id="file" /> 

<input type="button" value=" 读 取 文 本 文件 " onclick="readAsText()"/> 
</p> 
<div name="result" id="result"> 

<!-- 这 里 用 来 显示 读 取 结 果 --> 

</div> 


其 次 ,检测 浏览 器 是 否 支持 FileReader 接口 ,对 于 不 支持 FileReader 接口 的 浏览 器 将 给 出 一 个 提示 ， 
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代码 如 下 所 示 。 
if (typeof FileReader == 'undefined' ) 


{ 
result.innerHTML = "<p> 抱 次， 你 的 浏览 器 不 支持 FileReader</p>"; 
file.setAttribute( 'disabled','disabled ' ); 
最 后 ， 书 写 函 数 readAsText 的 代码 ， 当 file input 的 onclick 事件 触发 时 ， 调 用 这 个 函数 ， 首 先 获取 
到 file 对 象 ， 然 后 创建 一 个 FileReader 实例 ， 并 且 调 用 readAsText 方法 读 取 文 件 ， 在 实例 的 onload 事 


件 中 ， 获 取 到 成 功 读 取 到 的 文件 内 容 ， 显 示 在 页 面 中 ， 代 码 如 下 所 示 。 


function readAsText() 
{i 


var file = document.getElementByld("file").files[0]; 

var reader = new FileReader(); 

reader.readAsText(file); // 将 文件 以 文本 形式 读 入 页 面 
reader.onload = function(f) 


var result=document.getElementByld("result"); 
result.innerHTML=this.result; // 在 页 面 上 显示 读 入 文本 


运行 这 个 实例 ， 效 果 如 图 15.7 所 示 ， 单 击 “ 浏 览 ”按钮 ， 选 择 要 显示 的 文本 文件 ， 然 后 单 击 “ 读 
取 文 本 文件 ”按钮 ， 浏 览 器 中 将 显示 所 选择 的 文本 文件 的 内 容 ， 运 行 效果 如 图 15.7 所 示 。 


ET | HE 忆 | 合 | 加 :| 


请 选择 一 个 文件 ， CAUeersvDNNDesktop 于 日 科技 公司 滑 刘 -txt [三 X 二 广 外] 


吉林 省 明日 科技 有 限 公司 是 一 家 以 计算 机 软件 技术 为 核心 的 训 科 技 型 企业 ， 公 司 创建 

于 2000 年 1 2 人生 的 富 且 的 伯 开 估 卫 和 属 纪 

软件 开发 、 数 字 se 计划 机 网 弥 | 和 Ye 

发 季 ， 先 后 成 功 开发 了 污 及 生产 、 控制 、 仓 | 、 服 : 

种 企业 软件 1 i 人 资深 专家 和 学 
服务 体系 ， 公 司 基于 长 

和 tp 的 窗 斗 

A 加 信贷 


Or Tr RE 


ETATT En 产品 的 上 寺 关 避 
请 选择 一 个 文件 ， CHUDooraVinDeaktoo\ 二 上 和 术 冯 而 而 .Cxt 3 心 产品 人 Ea a i 的 市 
i Neer 3 [ER 


加 15.7 ”选择 要 浏览 的 文本 文件 图 15.8 显示 浏览 的 文本 文件 内 容 


15.2.5 ”FileReader 接口 中 的 事件 


FileReader 接口 中 包含 了 一 套 完整 的 事件 模型 ， 用 于 捕获 读 取 文件 时 的 状态 ， 表 15.2 归纳 了 这 些 
事件 。 
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表 15.2 ”FileReader 接口 的 事件 


事件 描 述 

onabort 中 断 时 触发 

onerror 出 错时 触发 

onload 文件 读 取 成 功 完成 时 触发 
onloadend 读 取 完 成 触发 ， 无 论 成 功 或 失败 
onloadstart 读 取 开 始 时 触发 

onprogress 读 取 中 


当 fileReader 对 象 读 取 文件 时 ， 会 伴随 着 一 系列 事件 ， 它 们 表示 读 取 文件 时 不 同 的 读 取 状 态 。 

例 15.6 ”下面 通 过 一 个 图 片上 传 的 实例 ， 来 看 一 下 这 些 读 取 状 态 的 先后 顺序 。( 实 例 位 置 :光盘 \ 
TM™N\sN\15\6) 

实现 的 主要 代码 如 下 所 示 。 


<!IDOCTYPE html><head> 

<meta charset="UTF-8"> 

<title>fileReader 对 象 的 事件 先后 顺序 </title> 
</head> 

<script language="javascript"> 

var result=document.getElementByld("result"); 
var input=document.getElementByld("input"); 
if(typeof FileReader=='undefined') 


result.innerHTML = "<p class='warn'> 抱 菊 ， 你 的 浏览 器 不 支持 FileReader</p>"; 
input.setAttribute( 'disabled','disabled' ); 
b 


function readFile() 


{ 
var file = document.getElementByld("file").files[0]; 


var reader = new FileReader(); 
reader.onload = function(e) 


result.innerHTML = '<img src="+this.result+" alt=""/>" 
alert("load"); 
ee = function(e) 
alert("progress"); 
reader.onabort = function(e) 
alert("abort"); 
Le = function(e) 
alert("error"); 
reader.onloadstart = function(e) 


alert("loadstart"); 
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reader.onloadend = function(e) 
alert("loadend"); 
ed 


</script> 


<p> 
<label> 请 选择 一 个 图 像 文 件 : </label> 

<input type="file" id="file" /> 

<input type="button" value=" 显 示 图 像 " onclick="readFile()" /> 
</p> 

<div name="result" id="result"> 

<!-- 这 里 用 来 显示 读 取 结 果 --> 

</div> 


在 这 个 实例 中 ， 通 过 单 击 显示 图 像 按 钮 在 浏览 器 中 读 入 一 个 图 像 文 件 ， 通 过 这 个 过 程 可 以 了 解 按 
顺序 触发 了 哪些 事件 ， 并 以 提示 信息 的 形式 报 出 这 些 事件 的 名 字 。 


15.3” 拖 放 API 


全 教学 录像 : 光盘 \TIMNIx\15\ 拖 放 APLexe 

在 HTML 5 中 ,支持 直接 拖 放 操作 的 API。 虽 然 HTML 5 之 前 已 经 可 以 使 用 mousedown、mousemove 
和 mouseup 来 实现 拖 放 操作 ， 但 只 支持 在 浏览 器 内 部 的 拖 放 ; 而 在 HTML 5 中 ， 已 经 支持 在 浏览 器 与 
其 他 应 用 程序 之 间 的 数据 的 互相 拖 动 ， 同 时 也 大 大 简化 了 有 关 拖 放 的 代码 。 


15.3.1 实现 拖 放 的 步骤 


在 HTML 5 中 要 想 实 现 拖 放 操作 ， 至 少 要 经 过 如 下 两 个 步 又。 
(1) 将 想 要 拖 放 的 对 象 元 素 的 draggable 属性 设 为 true (draggable="true") 。 这 样 才能 将 该 元 素 进 
行 拖 放 。 另 外 ，img 元 素 与 a 元 素 〈 必 须 指定 href) ， 默 认 人 允许 拖 放 。 
(2) 编写 与 拖 放 有 关 的 事件 处 理 代码 。 关 于 拖 放 存在 的 事件 如 表 15.3 所 示 。 
表 15.3 关于 拖 放 存 在 的 事件 


产生 事件 的 元 素 
被 拖 放 的 元 素 


描述 


开始 拖 放 操作 


drag 被 拖 放 的 元 素 拖 放 过 程 中 

dragenter | 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 开始 进入 本 元 素 的 范围 内 
dragover ”|  _ 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 正在 本 元 素 范围 内 移动 
dragleave ”| 拖 放 过 程 中 鼠标 经 过 的 元 素 被 拖 放 的 元 素 离开 本 元 素 的 范 上 

drop | 拖 放 的 目标 元 素 有 其 他 元 素 被 拖 放 到 了 本 元 素 中 


dragend 拖 放 的 对 象 元 素 拖 放 操作 结束 
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15.3.2 ”通过 拖 放 显 示 欢 迎 信息 


例 15.7 ”本 例 将 实现 一 个 拖 放 操作 。 在 该 实例 中 ， 有 一 个 显示 “ 拖 放 ”文字 的 div 元 素 ， 可 以 把 
它 拖 放 到 位 于 其 下 部 的 div 元 素 中 ， 每 次 被 拖 放 时 ， 下 部 的 div 元 素 中 会 追加 一 次 “明日 科技 欢迎 你 ” 
文字 。《〈 实 例 位 置 ， 光盘 \TMNsIN1S\7) 
实现 操作 的 具体 步骤 如 下 所 示 。 
(1) 将 想 要 拖 放 的 对 象 元 素 的 draggable 属性 设 为 tue， 同 时 在 <body> 标 签 中 添加 onload="initO" 
事件 。 另 外 ， 为 了 让 这 个 实例 在 所 有 支持 拖 放 API 的 浏览 器 中 都 能 正常 运行 ， 需 要 指定 “-webkit-user- 
drag:element” 这 种 Webkit 特有 的 CSS 属性 。 代 码 如 下 所 示 。 

<body onload="init()"> 

<h1> 拖 放 欢 迎 语 </h1> 


<!-- 把 draggable 属性 设 为 true--> 
<div id="dragme'" draggable="true" style="width: 200px; border: 1px solid gray;"> 
拖 放 


</div> 
<div id="text" style="width: 200px; height: 200px; border: 1px solid gray;"></div> 
</body> 

(2) 在 init0 函 数 中 获取 div 标签 的 id 的 值 。 代 码 如 下 所 示 。 

var source = document.getElementByld("dragme"); 
var dest = document.getElementByld("text"); 

(3) dragstart 事件 开始 实现 拖 动 ， 把 要 拖 动 的 数据 存 入 dataTransfer 对 象 。dataTransfer 对 象 专门 
来 存放 拖 放 时 要 携带 的 数据 , 它 可 以 被 设置 为 拖 动 事 件 对 象 的 dataTransfer 属性 。 最 后 , 通过 setData() 
方法 实现 拖 放 ， 该 方法 中 的 第 一 个 参数 为 携带 数据 的 数据 各 类 的 字符 串 ， 第 二 个 参数 为 要 携带 的 数据 。 
第 一 个 参数 中 表示 数据 各 类 的 字符 串 里 只 能 填 入 类 似 “text/plain” 或 “text/html” 的 表示 MIME 类 型 的 
文字 ， 不 能 填 入 其 他 文字 。 代 码 如 下 所 示 。 


source.addEventListener("dragstart", function(ev) 


var dt = ev.dataTransfer; /向 dataTransfer 对 象 追加 数据 

dt.effectAllowed = 'all'; 

dt.setData("text/plain", "明日 科技 欢迎 你 "); // 拖 动 元 素 为 dt.setData("text/plain", this.id); 
}, false); 


(4) 针对 拖 放 的 目标 元 素 ， 必 须 在 dragend 或 dragover 事件 内 调用 event.preventDefault() 方 法 。 
为 默认 情况 下 ， 拖 放 的 目标 元 素 是 不 允许 接受 元 素 的， 为 了 把 元 素 拖 放 到 其 中 ， 必 须 把 默认 处 理 关 闭 。 
代码 如 下 所 示 。 


dest.addEventListener("dragend", function(ev) lldragend: 拖 放 结 束 
{ 


ev.preventDefault(); // 不 执行 默认 处 理 〈 拒 绝 被 拖 放 ) 
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}, false); 

(5) 要 实现 拖 放 过 程 ， 还 必须 在 目标 元 素 的 drop 事件 中 关闭 默认 处 理 〈 拒 绝 被 拖 放 ) ,否则 目 
标 元 素 不 能 接受 被 拖 放 的 元 素 。 目 标 元 素 接受 到 被 拖 放 的 元 素 后 ， 执 行 getData() 方 法 从 DataTransfer 
那里 获得 数据 。getData() 方 法 的 参数 为 setData0 方 法 中 指定 的 数据 种 类 。 本 例 中 为 “text/plain 文 本文 
字 ) ”。 代 码 如 下 所 示 。 


dest.addEventListener("drop", function(ev) lldrop: 被 拖 放 


var dt = ev.dataTransfer; /1 从 dataTransfer 对 象 那里 取得 数据 
var text = dt.getData("text/plain"); 
dest.textContent += text; 


ev.preventDefault(); // 不 执行 默认 处 理 〈 拒 绝 被 拖 放 ) 
ev.stopPropagation(); /停止 事件 传播 
}, false); 


(6) 要 实现 拖 放 过 程 ， 还 必须 设 定 整 个 页 面 为 不 执行 默认 处 理 拒 绝 被 拖 放 〉， 否 则 拖 放 处 理 也 
不 能 实现 。 因 为 页 面 是 先 于 其 他 元 素 接受 拖 放 的 ， 如 果 页 面 上 拒绝 拖 放 ， 则 页 面 上 其 他 元 素 就 都 不 能 
接受 拖 放 了 。 代 码 如 下 所 示 。 

// 设 置 页 面 属 性 ， 不 执行 默认 处 理 拒 绝 被 拖 放 ) 


document.ondragover = function(e){e.preventDefault();}; 
document.ondrop = function(e)}{e.preventDefault();}; 


A 说明 现在 支持 拖 放 处 理 的 MIME 的 类 型 有 : “text/plain (文本 文字 )、“texthtml (HTML 文 
字 )、“text/xml (XML 文字 )”、“text/uri-list (URL 列表 ， 每 个 URL 为 一 行 。 


本 实例 运行 结果 如 图 15.9 所 示 。 


PF 


| 拖 放 欢迎 语 


晴 拟 | 
L J 

胃 日 科技 欢迎 你 明日 科技 欢 
中 迎 你 


图 15.9 实现 拖 放 示例 
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15.4 dataTransfer 对 象 应 用 详解 


镶 m 教学 录像 : 光盘 \TIMNIx\15\dataTransfer 对 象 应 用 详解 .exe 

下 面 简单 列举 一 下 dataTransfer 对 象 的 属性 与 方法 。 

dropEffect 属性 : 返回 已 选择 的 拖 放 效果 , 如果 该 操作 效果 与 起 初 设置 的 effectAllowed 效果 不 
符 ， 则 拖 放 操作 失败 。 可 以 设置 修改 ， 包 含 的 值 为 none、copy、link 和 move。 

effectAllowed 属性 : 返回 允许 执行 的 拖 放 操作 效果 ， 可 以 设置 修改 ,包含 的 值 为 none、copy、 
copyLink、 copyMove、 link、 linkMove、move、all 和 unintialize。 

types 属性 : 返回 在 dragstart 事件 出 发 时 为 元 素 存储 数据 的 格式 ， 如 果 是 外 部 文件 的 拖 放 ， 则 


返回 files。 
回 void clearData(DOMString format) 方 法 : 删除 指定 格式 的 数据 ， 如 果 未 指定 格式 ， 则 删除 当前 
元 素 的 所 有 携带 数据 。 


void setData(DOMString format, DOMString data) 方 法 : 为 元 素 添加 指定 数据 。 

回 DOMString getData(DOMString format) 方 法 : 返回 指定 数据 ， 如 果 数 据 不 存在 ， 则 返 
符 串 。 

回 void setDragImage 〈Element image, long x, long y): 制定 拖 放 元 素 时 跟随 鼠标 移动 的 图 片 ，x、y 
分 别 是 相对 于 鼠标 的 坐标 〈 部 分 浏览 器 中 可 以 用 canvas 等 其 他 元 素来 设置 )。 

对 于 getData 和 setData 方法 : setData 方法 在 拖 放 开始 时 向 dataTransfer 对 象 中 存 入 数据 ， 用 types 

属性 来 指定 数据 的 MIME 类 型 ， 而 getData 方法 在 拖 动 结束 时 读 取 dataTransfer 对 象 中 的 数据 。 
clearData 方法 可 以 用 来 清除 dataTransfer 对 象 内 数据 ， 璧 如 在 例 15.7 中 在 getData0 方 法 前 加 上 
“dt.clearData();” 语 句 ， 目 标 元 素 内 就 不 会 放 入 任何 数据 了 。 


霹 
水 


15.4.1 ”使 用 effectAllowed 和 dropEffect 属性 设置 拖 放 效果 


effectAllowed 属性 与 dropEffect 属性 结合 起 来 可 以 设 定 拖 放 时 的 视觉 效果 。effectAllowed 属性 表示 
当 一 个 元 素 被 拖 放 时 所 允许 的 视觉 效果 ， 一般 在 ondragstart 事件 中 设 定 ， 人 允许 设 定 的 值 为 none、copy、 
copyLink、copyMove、link、linkMove、move、all、unintialize。dropEffect 属性 表示 实际 拖 放 时 的 视觉 
效果 ， 一 般 在 ondragover 事件 中 指定 ， 允 许 设 定 的 值 为 none、copy、link、move。dropEffect 属性 所 表 
示 的 实际 视觉 效果 必须 在 effectAllowed 属性 所 表示 的 允许 的 视觉 效果 范围 内 ， 具 体 规则 如 下 。 

(1) 如 果 effectAllowed 属性 设 定 为 none， 则 不 允许 拖 放 要 拖 放 的 元 素 。 

(2) 如 果 dropEffect 属性 设 定 为 none， 则 不 允许 被 拖 放 到 目标 元 素 中 。 

(3) 如 果 effectAllowed 属性 设 定 为 all 或 不 设 定 ， 则 dropEffect 属性 允许 被 设 定 为 任何 值 ， 并 且 
按 指定 的 视觉 效果 进行 显示 。 

(4) 如 果 effectAllowed 属性 设 定 为 具体 效果 (不 为 none、all) ，dropEffect 属性 也 设 定 了 具体 视 
觉 效 果 ， 则 两 个 具体 效果 值 必须 完全 相等 ， 否 则 不 允许 将 被 拖 放 元 素 拖 放 到 目标 元 素 中 。 
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以 下 代码 为 例 15.7 中 对 effectAllowed 属性 及 dropEffect 属性 进行 设 定 的 代码 片段 。 


source.addEventListener("dragstart", function(ev) 


{ 


var dt = ev.dataTransfer; /向 dataTransfer 对 象 追加 数据 
dt.effectAllowed = 'all'; 
dt.setData("text/plain", "明日 科技 欢迎 你 "); // 拖 动 元 素 为 dt.setData("text/plain", this.id); 
}, false); 
dest.addEventListener("dragend", function(ev) /ldragend: 拖 放 结束 
{ 
ev.preventDefault(); // 不 执行 默认 处 理 〈 拒 绝 被 拖 放 ) 
}, false); 


15.4.2 ”使 用 setDraglmage 方法 设置 拖 放 图 标 


在 拖 放 一 个 元 素 时 ， 可 以 添加 自己 定制 的 拖 放 图 标 。 在 dragstart 事件 上 ， 可 以 使 


方法 ， 该 方法 有 3 个 参数 ， 第 一 个 参数 image 为 设 定 的 拖 放 图 标的 图 标 元 素 ， 第 二 个 参数 x 为 拖 放 图 


setDragImage 


标 离 鼠 标 指针 的 x 轴 方向 的 位 移 量 ， 第 三 个 参数 y 为 拖 放 图 标 离 鼠 标 指针 的 y 轴 方 向 


的 位 移 量 。 


例 15.8 ”以 下 是 调用 setDragImage 方法 的 代码 片段 ， 其 余 代 码 请 参考 前 面 实 例 。〈 实 例 位 置 : 光 
盘 \TMNsN1S\8) 
var draglcon = document.createElement('img'); // 创 建 图 标 元 素 
draglcon.src='http://192.168.1.96:82/mr/14/images/2.png'; // 设 定 图 标 来 源 
source.addEventListener("dragstart", function(ev) /开始 拖 放 
下 
var dt = ev.dataTransfer; /向 dataTransfer 对 象 追加 数据 
dt.setDraglmage(draglcon, -10, -10); 
dt.setData("text/plain", "明日 科技 欢迎 你 "); // 拖 动 元 素 为 dt.setData("text/plain", this.id); 


}, false); 


添加 定制 的 拖 动 图 标的 运行 效果 如 图 15.10 所 示 。 


口 拖 放 示例 
€)3][0 .© 


| 拖 放 欢 迎 语 


明日 科技 吉 还 你 明日 科技 其 | 
由 迎 你 明日 科技 欢迎 你 


图 15.10 添加 定制 的 拖 放 图 标的 效果 
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/ 
SS 本 实例 中 使 用 的 拖 放 图 标 ， 设 置 的 路 径 为 本 地 路 径 ， 想 要 使 用 本 例 中 的 图 标 ， 需 要 将 图 
标 位 置 改 为 本 地 的 路 径 。 


15.5 小 结 


本 章 主要 介绍 了 文件 API 和 拖 放 API。 在 文件 API 中 主要 介绍 了 FileList 对 象 与 file 对 象 、blob 对 
象 以 及 FileReader 接口 。 通 过 这 些 文件 的 对 象 和 接口 ， 可 以 实现 文件 的 上 传 与 文件 的 预览 等 操作 。 另 
外 还 介绍 了 实现 拖 放 的 步骤 和 为 拖 放 定制 拖 放 图 标 ,以 及 对 dataTransfer 对 象 的 属性 与 方法 的 介绍 。 希 
望 读 者 能 够 很 好 地 理解 和 掌握 文件 API 和 拖 放 API， 因 为 通过 使 用 文件 API 和 拖 放 API， 对 于 从 Web 
页 面 上 访问 本 地 文件 系统 的 相关 处 理 ， 将 会 变 得 十 分 简单 。 


15.6 习 题 
选择 题 
1， slice 方法 是 由 下 面 哪 种 对 象 提 供 的 ? (  ) 
A，FileList 对 象 B. blob C. file 对 象 D. 以 上 都 提供 
2，FileReader 接口 的 主要 作用 是 六 
A. 添加 一 个 图 像 B. 表示 用 户 选择 的 文件 列表 


C. 把 文件 读 入 内 存 ， 并 且 读 取 文件 中 的 数据 D. 以 上 皆 可 
3. 〈 ”) 将 文件 读 取 为 二 进 制 字符 串 。 


A. readAsDataURL B. readAsBinaryString 
C. readAsText D. 以 上 皆 可 
判断 题 


4. onloadend 在 文件 读 取 成 功 完 成 时 触发 。( ) 
5. 如 果 effectAllowed 属性 设 定 为 none， 则 不 允许 拖 放 要 拖 放 的 元 素 。 ) 


填空 题 


6. fle 对 象 有 两 个 属性 : 属性 表示 文件 名 ， 不 包括 路 径 ， 
后 修改 日 期 。 


属性 表示 文件 的 最 
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( 铝 / 教学 录像 : 35 分 钟 ) 


在 HTML 5 出现 之 前 ， 要 在 网 络 上 展示 视频 、 音 频 、 动 画 ， 除 了 使 用 第 三 方 自 
主 开发 的 播放 器 之 外 ， 使 用 得 最 多 的 工具 应 该 是 Flash 了 ， 但 是 它们 都 需要 在 浏览 
器 中 安装 相应 的 插件 后 才能 使 用 ,但 是 有 时 速度 很 慢 。HTML5 的 出 现 的 解决 了 这 
个 问题 。 在 HTML 5 中 ,提供 了 音频 、 视 频 的 标准 接口 ,通过 相关 技术 ,播放 视频 、 
动画 、 音 频 等 多 媒体 文件 再 也 不 需要 安装 插件 ， 只 要 使 用 支持 HTML 5 的 浏览 器 就 
可 以 了 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


MH ”掌握 多 媒体 元 素 的 基本 属性 
MH 掌握 多 媒体 元 素 的 常用 方法 
MH ”掌握 多 媒体 元 素 的 重要 事件 


16.1 
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16.1.1 HTML 4 中 多 媒体 的 应 用 


HTML 5 多 媒体 的 简 述 


在 HIML 5 之前， 如 果 开 发 者 想 要 在 Web 页 面 中 加 入 视频 ， 必 须 使 用 object 和 embed 元 素 ,而且 
还 要 为 这 两 个 元 素 添加 许多 属性 和 参数 。 在 HTML 4 中 多 媒体 的 应 用 代码 如 下 所 示 。 


<object width="425" height="344"> 

<param name="movie" value="http://www.mingribook.com" /> 
<param name="allowFullScreen" value="true" /> 

<param name="allowscriptaccess" value="always" /> 
<embed src="http://www.mingribook.com" 
type="application/x-shockwave-flash" 


allowscriptaccess="always” 


allowFullScreen="ture" width="425" height="344"> 


</embed> 
</object> 


从 上 面 的 代码 可 以 看 出 ， 


回 ”代码 元 长 而 笨拙 


在 HTML 4 中 使 用 多 媒体 有 如 下 缺点 。 


加 ”需要 使 用 第 三 方 插件 (如 Flash)。 如 果 用 户 没 有 安装 相应 插件 ， 则 不 能 播放 视频 ， 画 面 上 会 


出 现 一 片 空白 


16.1.2 HTML 5 页 面 中 的 多 媒体 


在 HTML 5 中 , 新 增 了 两 个 元 素 一 一 video 元 素 与 audio 元 素 。video 元 素 专门 用 来 播放 网 络 上 的 视 


频 或 电影 ， 而 audio 元 素 专门 用 来 播放 网 络 上 的 音频 数据 。 使 用 这 两 个 元 素 , 就 不 再 需要 使 用 其 他 插件 
了 ， 只 要 使 用 支持 HTML 5 的 浏览 器 就 可 以 了 。 表 16.1 中 介绍 了 目前 浏览 器 对 video 元 素 与 audio 元 


素 的 支持 情况 。 
表 16.1 ”目前 浏览 器 对 video 元 素 与 audio 元 素 的 支持 情况 
浏 览 器 支持 情况 
Chrome 3.0 及 以 上 版 本 支持 
Firefox 3.5 及 以 上 版 本 支持 
Opera 10.5 及 以 上 版 本 支持 
Safari 3.2 及 以 上 版 本 支持 


这 两 个 元 素 的 使 用 方法 都 很 简单 ， 首 先 以 audio 元 素 为 例 ， 只 要 把 播放 音频 的 URL 指定 的 该 元 素 


的 sre 属性 就 可 以 了 。 其 使 


方法 如 下 所 示 。 
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<audio src="http://mingri/demol/test.mp3"> 
您 的 浏览 器 不 支持 audio 元 素 ! 


</audio> 


通过 这 种 方法 , 可 以 把 指定 的 音频 数据 直接 嵌入 到 网 页 中 , 其 中 “您 的 浏览 器 不 支持 audio 元 素 ! ” 
为 在 不 支持 audio 元 素 的 浏览 器 中 所 显示 的 蔡 代 文字 。 

video 元 素 的 使 用 方法 也 很 简单 ， 只 要 设 定好 元 素 的 长 、 宽 等 属性 ， 并 且 把 播放 视频 的 URL 地 址 
指定 给 该 元 素 的 src 属性 就 可 以 了 。 其 使 用 方法 如 下 所 示 。 

<video width="640" height="360" src=" http://mingri/demo/test.mp3"> 


您 的 浏览 器 不 支持 video 元 素 ! 
</video> 


另外 ， 还 可 以 通过 使 用 source 元 素来 为 同一 个 媒体 数据 指定 多 个 播放 格式 与 编码 方式 ， 以 确保 浏览 器 
可 以 从 中 选择 一 种 自己 支持 的 播放 格式 进行 播放 ， 浏 览 器 的 选择 顺序 为 代码 中 的 书写 顺序 ， 它 会 人 上 往 下 
判断 自己 是 否 支持 该 播放 格式 ， 直 到 选择 到 自己 支持 的 播放 格式 为 止 。 其 使 用 方法 如 下 所 示 。 

<video width="640" height="360"> 

< 上 -在 Ogg theora 格式 、Quicktime 格式 与 MP4 格式 之 间 选 择 自己 支持 的 播放 格式 --> 

<source src="demo/sample.ogv" type="video/ogg; codecs='theora, vorbis"/> 


<source src="demo/sample.mov" type="Vvideo/quicktime"/> 
</video> 


source 元 素 具 有 以 下 几 个 属性 。 

加 src 属性 是 指 播放 媒体 的 URL 地 址 。 

回 type 属性 表示 媒体 类 型 ， 其 属性 值 为 播放 文件 的 MIME 类 型 ， 该 属性 中 的 codecs 参数 表示 所 
使 用 的 媒体 的 编码 格式 。 

因为 各 浏览 器 对 各 种 媒体 类 型 及 编码 格式 的 支持 情况 各 不 相同 ， 所 以 使 用 source 元 素来 指定 多 种 

媒体 类 型 是 非常 有 必要 的 

IE 9: 支持 H.264 和 VP8 视频 编码 格式 ;支持 MP3 和 WAV 音频 编码 格式 。 

回 Firefox 4 及 以 上 、Opera 10 及 以 上 : 支持 Ogg Theora 和 VP8 视频 编码 格式 ; 支持 Ogg vorbis 
和 WAV 音频 格式 。 

加 ” Chrome 6 及 以 上 : 支持 H.264、VP8 和 Ogg Theora 视频 编码 格式 ， 支持 Ogg vorbis 和 MP3 
音频 编码 格式 。 


16.2 多 媒体 元 素 基本 属性 


网 4 教学 录像 : 光盘 \TMNbA16\ 多 媒体 元 素 基本 属性 .exe 

video 元 素 与 audio 元 素 所 具有 的 属性 大 致 相同 ， 接 下 来 具体 介绍 其 属性 。 
回 src 属性 和 autoplay 属性 

src 属性 用 于 指定 媒体 数据 的 URL 地 址 。 
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autoplay 属性 用 于 指定 媒体 是 否 在 页 面 加 载 后 自动 播放 ， 使 用 方法 如 下 。 
<video src="sample.mov" autoplay="autoplay"></video> 
perload 属性 
该 属性 用 于 指定 视频 或 音频 数据 是 否 预 加 载 。 如 果 使 用 预 加 载 ， 则 浏览 器 会 预先 将 视频 或 音频 数 
据 进行 缓冲 ， 这 样 可 以 加 快 播放 速度 ， 因 为 播放 时 数据 已 经 预先 缓冲 完毕 。 该 属性 有 3 个 可 选 值 ， 分 
别 是 none、metadata 和 auto， 其 默认 值 为 auto。 
> ”none 表示 不 进行 预 加 载 。 
> metadata 表示 只 预 加 载 媒体 的 元 数据 〈 媒 体 字 节 数 、 第 一 帧 、 播 放 列表 、 持 续 时 间 等 ) 。 
> ”auto 表示 预 加 载 全 部 视频 或 音频 。 
该 属性 的 使 用 方法 如 下 所 示 。 
<video src="sample.mov" preload="auto"></video> 
回 “poster (video 元 素 独 有 属性 ) 和 loop 属性 
当 视 频 不 可 用 时 ， 最 好 使 用 poster 属性 ， 以 免 展 示 视 频 的 区 域 中 出 现 一 片 空白 。 该 属性 的 使 用 方 
法 如 下 所 示 。 
<video src="sample.mov" psoter="cannotuse.jpg"></video> 
loop 属性 用 于 指定 是 否 循 环 播放 视频 或 音频 ， 其 使 用 方法 如 下 。 
<video src="sample.mov" autoplay="autoplay" loop="loop"></video> 
回 “controls 属性 、wdith 属性 和 height 属性 (后 两 个 为 video 元 素 独 有 属性 ) 
controls 属性 指定 是 否 为 视频 或 音频 添加 浏览 器 自 带 的 播放 用 的 控制 条 。 控 制 条 中 有 播放 、 暂 停 等 
按钮 。 其 使 用 方法 如 下 。 


<video src="sample.mov" controls="controls"></video> 


图 16.1 所 示 为 Firefox 3.5 浏览 器 自 带 的 播放 视频 时 用 的 控制 条 的 外 观 。 


图 16.1 Firefox 3.5 浏览 器 自 带 的 播放 视频 时 用 的 控制 条 


/. 
SC 四 开发 者 也 可 以 在 脚本 中 自 定义 控制 条 ， 而 不 使 用 浏览 器 默认 的 控制 条 ， 


width 属性 与 height 属性 用 于 指定 视频 的 宽度 与 高 度 〈 以 像素 为 单位 ) ， 使 用 方法 如 下 。 
<video src="sample.mov" width="500" height="500"></video> 
加 ”error 属性 
在 读 取 、 使 用 媒体 数据 的 过 程 中 ， 正 常情 况 下 该 属性 为 null， 但 是 任何 时 候 只 要 出 现 错误 ， 该 属 
性 将 返回 一 个 MediaError 对 象 ， 该 对 象 的 code 属性 返回 对 应 的 错误 状态 码 ， 其 可 能 的 值 如 下 4 个 。 
> MEDIA_ERR_ABORTED (数值 1) : 媒体 数据 的 下 载 过 程 由 于 用 户 的 操作 原因 而 被 终止 。 
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> MEDIA ERR_NETWORK (数值 2) : 确认 媒体 资源 可 用 ， 但 是 在 下 载 时 出 现 网 络 错误 ， 
媒体 数据 的 下 载 过 程 被 终止 。 
> MEDIA_ERR_ DECODE (数值 3) : 确认 媒体 资源 可 用 ， 但 是 解码 时 发 生 错 误 。 
> MEDIA_ERR_SRC_ NOT _ SUPPORTED (数值 4) : 媒体 资源 不 可 用 或 媒体 格式 不 被 支持 。 
error 属性 为 只 读 属 性 ， 读 取 错 误 状态 的 代码 如 下 。 
<video id="videoElement" src="mingri.mov"> 
<script> 
var video=document.getElementByld("video Element"); 
video.addEventListener("error ,function(){ 


{ 


var error=video.error; 
switch (error.code) 
{ 
case 1: 
alert(" 视 频 的 下 载 过 程 被 中 止 。"); 
break; 
case 2: 
alert(" 网 络 发 生 故障 ， 视 频 的 下 载 过 程 被 中 止 。"); 
break; 
case 3: 
alert(" 解 码 失败 。"); 
break; 
case 4: 
alert(" 不 支持 播放 的 视频 格式 。"); 
break; 
default: 
alert(" 发 生 未 知 错误 。"); 
,false); 
</script> 


networkState 属性 
该 属性 在 媒体 数据 加 载 过 程 中 读 取 当 前 网 络 的 状态 ， 其 值 包括 以 下 4 个 。 
> NETWORK EMPTY (数值 0) : 元 素 处 于 初始 状态 。 
> NETWORK IDLE (数值 1) : 浏览 器 已 选择 好 用 什么 编码 格式 来 播放 媒体 ， 但 尚未 建立 
网 络 连接 。 
> NETWORK_LOADING (数值 2) : 媒体 数据 加 载 中 。 
> NETWORK NO_SOURCE (数值 3) : 没有 支持 的 编码 格式 ， 不 执行 加 载 。 
networkState 属性 为 只 读 属 性 ， 读 取 网 络 状态 的 实例 代码 如 下 。 
<Script> 
var video = document.getElementByld("video"); 


video.addEventListener("progress", function(e) 


var networkStateDisplay=document.getElementByld("networkState"); 
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if(video.networkState==2) 
networkStateDisplay.innerHTML=" 加 载 中 ..….["+e.loaded+"/"+e.total+"byte]"; 
we if(video.networkState==3) 
networkStateDisplay.innerHTML=" 加 载 失败 "; 
pe 


</script> 


加 “currentSrc 属性 、buffered 属性 
可 以 用 currentSrc 属性 来 读 取 播放 中 的 媒体 数据 的 URL 地 址 ， 该 属性 为 只 读 属性 。 


buffered 属性 返回 一 个 实现 TimeRanges 接口 的 对 象 ， 以 确认 浏览 器 是 否 已 缓存 媒体 数据 。 
TimeRanges 对 象 表示 一 段 时 间 范 围 ， 在 大 多 数 情况 下 ， 该 对 象 表示 的 时 间 范 围 是 一 个 单一 的 以 0 开始 
的 范围 ， 但 是 如 果 浏 览 器 发 出 RangeRquest 请 求 ， 这 时 TimeRanges 对 象 表示 的 时 间 范 围 是 多 个 时 间 


范围 。 


TimeRanges 对 象 具有 一 个 length 属性 ， 表 示 有 多 少 个 时 间 范 围 ， 多 数 情况 下 存在 时 间 范 围 时 ， 该 
值 为 1, 不 存在 时 间 范 围 时 , 该 值 为 0; 该 对 象 有 两 个 方法 : start(index) 和 end(index), 多 数 情况 下 将 index 


设置 为 0 就 可 以 了 。 当 用 element.buffered 语句 来 实现 TimeRanges 接口 时 ，start(0) 表 示 当 前 


[缓存 区 内 从 


媒体 数据 的 什么 时 间 开始 进行 缓存 ，end(0) 表 示 当 前 缓存 区 内 的 结束 时 间 。buffered 属性 为 只 读 属 性 。 


回 readyState 属性 
该 属性 返回 媒体 当前 播放 位 置 的 就 绪 状 态 ， 其 值 包 括 以 下 5 个 。 


> HAVE NOTHING (数值 0) : 没有 获取 到 媒体 的 任何 信息 ， 当 前 播放 位 置 没有 可 播放 数 


据 。 


> HAVE METADATA (数值 1) : 已 经 获取 到 了 足够 的 媒体 数据 ， 但 是 当前 播放 位 置 没 有 


有 效 的 媒体 数据 〈 也 就 是 说 ， 获 取 到 的 媒体 数据 无 效 ， 不 能 播放 ) 。 
> HAVE_CURRENT_DATA (数值 2) : 当前 播放 位 置 已 经 有 数据 可 以 播放 ， 


但 没有 获取 


到 可 以 让 播放 器 前 进 的 数据 。 当 媒体 为 视频 时 ， 意 思 是 当前 帧 的 数据 已 获得 ， 但 还 没有 


获取 到 下 一 帧 的 数据 ， 或 者 当前 帧 已 经 是 播放 的 最 后 一 帧 。 


> HAVE FUTURE_DATA (数值 3) : 当前 播放 位 置 已 经 有 数据 可 以 播放 ， 而 且 也 获取 到 
了 可 以 让 播放 器 前 进 的 数据 。 当 媒体 为 视频 时 ， 意 思 是 当前 帧 的 数据 已 获取 ， 而 且 也 获 


取 到 了 下 一 帧 的 数据 ， 当 前 帧 是 播放 的 最 后 一 帧 时 ，readyState 属性 不 可 能 为 


HAVE FUTURE DATA. 


> HAVE _ ENOUGH DATA (数值 4) : 当前 播放 位 置 已 经 有 数据 可 以 播放 ， 同 时 也 获取 到 
了 可 以 让 播放 器 前 进 的 数据 ， 而 且 浏览 器 确认 媒体 数据 以 某 一 种 速度 进行 加 载 ， 可 以 保 


证 有 足够 的 后 续 数据 进行 播放 。 
readyState 属性 为 只 读 属性 。 
回 ”seeking 属性 和 seekable 属性 


seeking 属性 返回 一 个 布尔 值 ， 表 示 浏 览 器 是 否 正在 请 求 某 一 特定 播放 位 置 的 数据 ，true 表示 浏览 


器 正在 请 求 数据 ，false 表示 浏览 器 已 停止 请 求 。 
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seekable 属性 返回 一 个 TimeRanges 对 象 , 该 对 象 表示 请 求 到 的 数据 的 时 间 范 围 。 当 媒体 为 视频 时 ， 
开始 时 间 为 请 求 到 视频 数据 第 一 帧 的 时 间 ， 结 束 时 间 为 请 求 到 视频 数据 最 后 一 帧 的 时 间 。 

这 两 个 属性 均 为 只 读 属 性 。 

currentTime 属性 、startTime 属性 和 duration 属性 

currentTime 属性 用 于 读 取 媒 体 的 当前 播放 位 置 , 也 可 以 通过 修改 currentTime 属性 来 修改 当前 播放 
位 置 。 如 果 修 改 的 位 置 上 没有 可 用 的 媒体 数据 时 ,将 抛 出 INVALID_STATE_ERR 异常 ， 如 果 修 改 的 位 
置 超出 了 浏览 器 在 一 次 请 求 中 可 以 请 求 的 数据 范围 ， 将 抛 出 INDEX_SIZE_ERR 异常 。 

startTime 属性 用 来 读 取 媒体 播放 的 开始 时 间 ， 通 常 为 0。 

duration 属性 来 读 取 媒体 文件 总 的 播放 时 间 。 

played 属性 、paused 属性 和 ended 属性 

played 属性 返回 一 个 TimeRanges 对 象 ， 从 该 对 象 中 可 以 读 取 媒体 文件 的 已 播放 部 分 的 时 间 段 。 开 
始 时 间 为 已 播放 部 分 的 开始 时 间 ， 结 束 时 间 为 已 播放 部 分 的 结束 时 间 。 

paused 属性 返回 一 个 布尔 值 ， 表 示 是 否 暂停 播放 ，true 表示 媒体 暂停 播放 ，false 表示 媒体 正在 播放 。 

ended 属性 返回 一 个 布尔 值 ， 表 示 是 否 播 放 完 毕 ，true 表示 媒体 播放 完毕 ，false 表示 还 没有 播放 完毕 。 

三 者 均 为 只 读 属性 。 

加 ”defaultPlaybackRate 属性 和 playbackRate 属性 

defaultPlaybackRate 属性 用 来 读 取 或 修改 媒体 默认 的 播放 速率 。 

playbackRate 属性 用 于 读 取 或 修改 媒体 当前 的 播放 速率 。 

Volume 属性 和 muted 属性 

volume 属性 用 于 读 取 或 修改 媒体 的 播放 音量 ， 范 围 为 0 一 1，0 为 静音 ，1 为 最 大 音量 。 

mnuted 属性 用 于 读 取 或 修改 媒体 的 静音 状态 ， 其 值 为 布尔 型 ，true 表示 处 于 静音 状态 ，false 表示 处 
于 非 静音 状态 。 


16.3 多 媒体 元 素 常用 方法 
区 1 教学 录像 : 光盘 \TIM\IxX\16\ 多 媒体 元 素 常用 方法 .exe 


16.3.1 媒体 播放 时 的 方法 


加 ”使 用 media.play0 播 放 视频 ， 会 将 media.paused 的 值 强行 设 为 false。 
使 用 media.pause() 暂 停 视频 ， 会 将 media.paused 的 值 强行 设 为 ture。 
回 ”使 用 media.load() 重 新 载 入 视频 ， 会 将 media.playbackRate 的 值 强行 设 为 media.defaultPlayback 
Rate 的 值 ， 且 强行 将 media.error 的 值 设 为 null。 
例 16.1 本 例 通 过 video 元 素 加 载 一 段 视频 文件 ， 为 了 展示 视频 播放 时 所 应 用 的 方法 ， 在 控制 视 
频 的 播放 时 ， 并 没有 应 用 浏览 器 自 带 的 控制 条 来 控制 视频 的 播放 而 是 通过 添加 “播放 ”与 “暂停 ” 按 
钮 来 控制 视频 文件 的 播放 与 暂停 。 〈 实 例 位 置 : 光盘 \TMIsN16G\1) 
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实例 代码 如 下 所 示 。 


<html> 

<head> 

<meta charset="UTF-8"></meta> 

<title> 媒 体 播放 示例 </title> 

<script> 

var video; // 声 明 变量 
function init() 


video = document.getElementByld("video1"); 


video.addEventListener("ended", function() /监听 视频 播放 结束 事件 
alert(" 播 放 结束 。"); 
}, true); 
} 
function play() 
{ 
video.play(); /播放 视频 


function pause() 


video.pause(); // 暂 停 播放 


</script> 
</head> 
<body onload="init()"> 
< 上 -可 以 添加 controls 属性 来 显示 浏览 器 自 带 的 播放 用 的 控制 条 --> 
<video id="video1" src="2.0gv" > 
</video><br/> 
<button onclick="play()"> 播 放 </button> 
<button onclick="pause()"> 暂 停 </button> 
</body> 
</html> 


本 实例 的 运行 效果 如 图 16.2 所 示 。 


图 16.2 媒体 播放 示例 
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16.3.2 ”canPlayType(type) 方 法 


使 用 canPlayType(type) 方 法 测试 浏览 器 是 否 支持 指定 的 媒介 类 型 ， 该 方法 的 定义 如 下 所 示 。 
var support=videoElement.canPlayType(type); 


videoElement 表示 页 面 上 的 video 元 素 或 audio 元 素 。 该 方法 使 用 一 个 参数 type， 该 参数 的 指定 方 
法 与 source 元 素 的 type 参数 的 指定 方法 相同 ， 都 用 播放 文件 的 MIME 类 型 来 指定 ， 可 以 在 指定 的 字符 
串 中 加 上 表示 媒体 编码 格式 的 codecs 参数 。 

该 方法 返回 3 个 可 能 值 〈 均 为 浏览 器 判断 的 结果 ) : 空 字 符 串 浏览 器 不 支持 此 种 媒体 类 型 。maybe 
浏览 器 可 能 支持 此 种 媒体 类 型 。probably 浏览 器 确定 支持 此 种 媒体 类 型 。 


16.4 多 媒体 元 素 重要 事件 


若 4 教学 录像 : 光盘 VTMNIxN16\ 多 媒体 元 素 重 要 事件 .exe 


16.4.1 事件 处 理 方式 


在 利用 video 元 素 或 audio 元 素 读 取 或 播放 媒体 数据 的 时 候 ,会 触发 一 系列 的 事件 .如 果 用 JavaScript 
脚本 来 捕捉 这 些 事件 ， 就 可 以 对 这 些 事件 进行 处 理 了 。 对 于 这 些 事件 的 捕捉 及 其 处 理 ， 可 以 按 以 下 两 
种 方式 来 进行 。 

一 种 是 监听 的 方式 。addEventListener 方法 可 以 对 事件 的 发 生 进行 监听 ， 该 方法 的 定义 如 下 所 示 。 


videoElement.addEventListener(type,listener,useCapture); 


videoElement 表示 页 面 上 的 video 元 素 或 audio 元 素 ; type 为 事件 名 称 ，listener 表示 绑 定 的 函数 ， 
useCapture 是 一 个 布尔 值 ， 表 示 该 事件 的 响应 顺序 ， 该 值 如 果 为 tue， 浏 览 器 采用 Capture 响应 方式 ， 
如 果 为 false， 浏 览 器 采用 bubbing 响应 方式 ， 默 认 情况 下 也 为 false。 

另 一 种 是 直接 赋值 的 方式 。 事件 处 理 方式 为 JavaScript 脚本 中 常见 的 获取 事件 句柄 的 方式 ,代码 如 
下 所 示 。 

<video id="video1" src="mrsoft.mov" onplay="begin_playing()"></video> 


function begin_playing() 
{ 


上 
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16.4.2 事件 介绍 


下 面 将 介绍 一 下 浏览 器 在 请 求 媒 体 数 据 、 下 载 媒体 数据 、 播 放 媒体 数据 一 直到 播放 结束 这 一 系列 


的 过 程 


办 办 办 办 罗 图 网 办 办 办 办 办 轨 


办 


网 图 加 


bh， 具体 触发 的 事件 。 

loadstart 事件 ， 浏览 器 开始 请 求 媒 介 。 

progress 事件 : 浏览 器 正在 获取 媒介 。 

suspend 事件 : 浏览 器 非 主动 获取 媒介 数据 ， 但 没有 加 载 完整 个 媒介 资源 。 

abort 事件 : 浏览 器 在 完全 加 载 前 中 止 获取 媒介 数据 ， 但 是 并 不 是 由 错误 引起 的 。 

error 事件 ， 获 取 媒 介 数 据 出 错 。 

emptied 事件 : 媒介 元 素 的 网 络 状态 突然 变 为 未 初始 化 ; 可 能 引起 的 原因 有 两 个 : 一 是 载 入 媒 
体 过 程 中 突然 发 生 一 个 致命 错误 ， 二 是 在 浏览 器 正在 选择 支持 的 播放 格式 时 ， 又 调用 了 load 
方法 重新 载 入 媒体 。 

stalled 事件 ， 浏览 器 获取 媒介 数据 异常 。 

play 事件 : 即将 开始 播放 ， 当 执行 了 play 方法 时 触发 ， 或 数据 下 载 后 元 素 被 设 为 autoplay ( 自 
动 播放 ) 属性 。 

pause 事件 : 暂停 播放 ， 当 执行 了 pause 方法 时 触发 。 

loadedmetadata 事件 : 浏览 器 获取 完 媒介 资源 的 时 长 和 字 节 。 

loadeddata 事件 : 浏览 器 已 加 载 当前 播放 位 置 的 媒介 数据 。 

waiting 事件 : 播放 由 于 下 一 帧 无 效 〈 如 未 加 载 ) 而 停止 〈 但 浏览 器 会 确认 下 一 帧 马上 有 效 )。 
playing 事件 : 已 经 开始 播放 。 

canplay 事件 : 浏览 器 能 够 开始 媒介 播放 ， 但 估计 以 当前 速率 播放 不 能 直接 将 媒介 播放 完 〈 播 
放 期 间 需要 缓冲 )。 

canplaythrough 事件 : 浏览 器 估计 以 当前 速率 直接 播放 可 以 直接 播放 完整 个 媒介 资源 (期 间 不 
需要 缓冲 )。 

seeking 事件 : 浏览 器 正在 请 求 数据 (seeking 属性 值 为 true)。 

seeked 事件 : 浏览 器 停止 请 求 数据 〈seeking 属性 值 为 false)。 

timeupdate 事件 ;当前 播放 位 置 〈currentTime 属性 ) 改变 ， 可 能 是 播放 过 程 中 的 自然 改变 ， 

也 可 能 是 被 人 为 地 改变 ， 或 由 于 播放 不 能 连续 而 发 生 的 跳 变 。 

ended 事件 : 播放 由 于 媒介 结束 而 停止。 

ratechange 事件 : 默认 播放 速率 (defaultPlaybackRate 属性 ) 改变 或 播放 速率 〈playbackRate 
属性 ) 改变 。 

durationchange 事件 ， 媒介 时 长 〈duration 属性 ) 改变 。 

volumechange 事件 : 音量 (volume 属性 ) 改变 或 静音 (muted 属性 )。 
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16.4.3 ”事件 实例 


例 16.2 本 例 将 在 页 面 中 显示 要 播放 的 多 媒体 文件 ， 同 时 显示 多 媒体 文件 的 总 时 间 ， 当 单 击 “ 播 
放 ” 按 钮 时 ， 将 显示 当前 播放 的 时 间 。 多 媒体 文件 的 总 时 间 与 当前 时 间 将 以 “时 :分 : 秒 ” 的 形式 显示 。 
(实例 位 置 光盘 \TMNsN16\2) 

本 实例 实现 的 具体 步骤 如 下 所 示 。 

(1) 通过 video 标签 添加 多 媒体 文件 。 其 实现 代码 如 下 所 示 。 


<video > 
<source src="2.0gv" type="video/ogg" /> 
</video> 


(2) 在 页 面 中 放置 一 个 一 行 三 列 的 表格 ， 在 3 个 单元 格 中 放置 3 个 div 标签 ， 分别 用 于 放置 “ 播 
放 / 和 暂停” 按钮 、 媒 体 的 总 时 间 、 当 前 播放 时 间 。 其 实现 的 主要 代码 如 下 所 示 。 


<div class="videochrome paused"> 
<div class="controls"> 
<div class="scrub"> 
<table width="150" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td width="50" scope="row"><button class="play" title="play"> 播 放 </button></td> 
<td width="50" align="center"><div class="duration">0:00</div></td> 
<td width="50" align="center"><div class="loaded"><div class="buffer"><div class="playhead"> 
<span>0:00</span></div></div></div></td> 
</tr> 
</table> 
</div> 
</div> 
</div> 


(ER 
以 理解 为 菜 一 类 元 素 ); 而 过 用 于 标记 单独 的 唯一 的 元 素 . 


(3) 通 过 querySelector 方法 获取 div 标签 中 class 的 值 , 并 赋 给 变量 。 其 实现 的 主要 代码 如 下 所 示 。 


/通过 querySelector 方法 获 标签 的 值 并 赋 给 变量 

wrapper = document.querySelector('.videochrome'’), 

buffer = document.querySelector('.videochrome .controls .buffer), 
playhead = buffer.querySelector('.playhead'), 

play = wrapper.querySelector('.play'), 

duration = wrapper.querySelector('.duration'), 

currentTime = playhead.querySelector('span'); 


querySelector 方法 用 来 获取 一 个 元 素 ，querySelector 将 返回 匹配 到 的 第 一 个 元 素 ， 如 果 没 有 匹配 
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的 元 素 则 返回 null。 与 querySelector 方法 相关 的 还 有 一 个 querySelectorAll ， 该 方法 返回 一 个 包含 匹配 
到 的 元 素 的 数组 ， 如 果 没 有 匹配 的 元 素 则 返回 的 数组 为 空 。 
(4) 使 用 video 元 素 的 addEventListener 方法 对 loadeddata 事件 进行 监听 , 同时 绑 定 canplay 函数 ， 
在 这 个 函数 中 调用 initControls 函数 ， 在 该 函数 中 用 分 秒 来 显示 当前 播放 时 间 。 同 时 当 调 用 play 方法 时 
触发 onclick 事件 ， 在 这 个 事件 中 对 播放 的 进度 进行 判断 ， 当 播放 完成 后 ， 当 前 播放 为 0， 否则 通过 三 
位 运算 符 执行 播放 或 者 是 和 暂停。 其 实现 的 代码 如 下 所 示 。 
video.addEventListener(loadeddata', canplay, false); /使 用 事件 监听 准备 播放 


function canplay() { // 调 用 canplay 函数 初始 化 媒体 
initControls(); 
} 
function initControls() { 
duration.innerHTML = asTime(video.duration); // 将 播放 时 间 以 分 和 秒 的 形式 输出 
play.onclick = function () { 
if (video.ended) { // 如 果 媒 体 播 放 结束 ， 播 放 时 间 从 0 开始 


video.currentTime = 0; 


} 
video[video.paused ? 'play' : ‘pause'](); // 通 过 三 元 运算 执行 播放 和 暂停 
» 
b 
(5) 由 于 currentTime 和 duration 的 时 间 值 ， 默认 的 单位 是 秒 , 而 本 例 中 输出 的 媒体 文件 的 总 时 间 
和 当前 播放 时 间 是 以 分 和 秒 的 形式 输出 ， 这 就 需要 通过 转化 才能 实现 。 具 体 的 实现 方法 是 ， 首先， 通 
过 asTime 函数 获取 时 间 ， 再 利用 Math.round 函数 对 其 进行 取 整 。 然 后 ， 将 取 整 后 的 时 间 除 以 60 转化 
成 分 ,再 将 分 转化 成 时 ， 最 后 ， 对 转化 时 、 分 后 剩余 的 秒 数 进行 判断 ， 即 对 剩余 秒 数 的 位 数 进行 判断 ， 
当 位 数 小 于 2 时， 将 以 0 补 位 。 其 具体 实现 的 代码 如 下 所 示 。 


function asTime(t) { 


t= Math.round(t); // 通 过 Math.round 函数 对 获取 的 时 间 取 整 
var s =t % 60; /| 转化 为 分 
var m = ~~(t/ 60); 
return m + ":' + two(s); /以 分 : 秒 的 形式 输出 时 间 
出 
function two(s) { 
| 
if (s.length < 2) s = "0" + si // 对 秒 数 的 位 数 进行 判断 ， 位 数 小 于 2 时 以 0 补 位 
return s; 
} 


(6) 使 用 video 元 素 的 addEventListener 方法 对 play、pause 和 ended 等 事件 进行 监听 ， 同 时 绑 定 
playEvent 和 pausedEvent 函数 ， 在 这 两 个 函数 中 ， 实 现 输出 “播放 ”/“ 和 暂停 ”按钮 的 转化 。 其 实现 的 
代码 如 下 所 示 。 


video.addEventListener('play, playEvent, false); /使 用 事件 播放 

video.addEventListener('pause', pausedEvent, false); /播放 暂停 

video.addEventListener(ended', function (){ /| 播放 结束 后 停止 播放 
this.pause(); /显示 暂停 播放 
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}, false); 

function playEvent() { 
play.innerHTML = ' 暂 停 '; 

} 

function pausedEvent() { 
play.innerHTML = ' 播 放 '; 

| 


(7) 使 用 video 元 素 的 addEventListener 方法 对 durationchange 和 timeupdate 等 事件 进行 监听 ， 同 


播放 时 间 。 实 现 的 代码 如 下 所 示 。 


video.addEventListener('durationchange', updateSeekable, false); /播放 的 时 长 被 改变 


video.addEventListener(timeupdate', updatePlayhead, false); /使 用 事件 监听 方式 捕捉 事件 
function updateSeekable() { 
duration.innerHTML = asTime(video.duration); // 媒 体 文件 的 总 播放 时 间 
} 
function updatePlayhead() { 
currentTime.innerHTML = asTime(video.currentTime); // 媒 体 的 当前 播放 时 间 
} 


本 例 的 运行 效果 如 图 16.3 所 示 。 


区 到 1229 009 


图 16.3 事件 捕捉 实 例 


16.5 小 结 


本 章 介绍 了 HTML 5 中 的 audio 元 素 和 video 元 素 的 用 法 ， 并 演示 了 如 何 使 用 它们 构建 Web 应 用 。 


audio 元 素 和 video 元 素 的 引入 ， 让 HTML 5 的 应 用 在 对 媒体 的 使 用 上 多 了 一 种 选择 : 不 用 插件 即 可 播 
放 音 频 和 视频 。 此 外 ，audio 元 素 和 video 元 素 还 提供 了 通用 的 、 集 成 化 的 可 用 脚本 控制 的 API。 
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16.6 习 


题 


) 元 素来 为 同一 个 媒体 数据 指定 多 个 播放 格式 与 编码 方式 。 


B. video C. 


2. 下 面 的 属性 中 指定 媒体 是 否 在 页 面 加 载 后 自动 播放 的 是 (  )。 


A. loop 


B. autoplay C. 


3. 下 面 的 属性 中 为 读 写 属性 的 是 (  )。 


A. error 


B. currentTime Cs 


4. canPlayType 方法 是 用 来 ji 


A， 播放 媒体 


B. 
C. 测试 浏览 器 是 否 支 持 指定 的 媒体 类 型 D. 


5. 用 于 控制 播放 媒体 音量 大 小 的 属性 是 (  ) 。 


A. volume 
判断 题 
6，startTime 属性 
填空 题 


B. muted GC 


audio D. 以 上 都 不 是 
poster D. auto 
currentSrc D. buffered 
暂停 播放 

以 上 都 不 是 

seeking D. buffered 


来 读 取 媒体 播放 的 开始 时 间 ， 通 常 为 1。 (。 ) 


人 属性 指定 是 否 为 视频 或 音频 添加 浏览 器 自 带 的 播放 用 的 控制 条 。 
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( 器 ! 教学 录像 : 1 小 时 32 分 钟 ) 


本 章 将 介绍 HTML5 中 的 一 个 新 增 元 素 一 一 Canvas 以 及 伴随 该 元 素 而 来 的 一 
套 编 程 接口 一 一 canvas API。 使 用 canvas API 可 以 在 页 面 上 绘制 出 任何 需要 的 、 非 
常 漂亮 的 图 形 与 图 像 ， 制 作出 更 加 丰富 多 彩 、 赏 必 悦 目的 \Web 页 面 。 
通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


Lg 
Lg 
Lg 


Lg 


掌握 canvas 元 素 的 基础 知识 

掌握 使 用 路 径 绘制 出 圆 形 与 多 边 形 的 方法 

掌握 渐变 图 形 的 绘制 方法 ， 学 会 图 形变 形 、 图 形 缩放 、 图 形 组 合 以 及 给 图 形 绘制 
阴影 的 方法 

掌握 在 canvas 画布 中 使 用 图 像 的 方法 

掌握 在 画布 中 绘制 文字 ， 给 文字 加 上 边框 的 方法 

掌握 保存 及 恢复 绘图 状态 的 方法 
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17.1 canvas 的 基础 知识 


名 教学 录像 : 光盘 \TMN\Ix\17\canvas 的 基础 知识 .exe 

HTML 5 中 的 canvas 有 很 多 的 功能 ， 要 用 一 整 本 书 的 篇 幅 才 能 介绍 完 这 个 主题 。 这 里 只 介绍 
HTML 5 canvas 的 一 些 基 础 知识 ， 并 展示 一 些 可 以 使 用 画布 元 素 实现 的 实用 的 内 容 ， 如 处 理 来 自 画 布 
中 的 一 幅 图 像 的 单个 像素 。 


17.1.1 canvas 是 什么 


canvas 是 HTML 5 中 新 增 的 一 个 重要 元 素 ， 专 门 用 来 绘制 图 形 。 在 页 面 上 放置 一 个 canvas 元 素 ， 
就 相当 于 在 页 面 上 放置 了 一 块 “画布”， 可 以 在 其 中 进行 图 形 的 绘制 。 

但 是 ， 在 canvas 元 素 里 进行 绘画 ， 并 不 是 使 用 鼠标 作画 。 在 网 页 上 使 用 canvas 元 素 时 ， 它 会 创建 
一 块 矩 形 区 域 。 默 认 情 况 下 该 矩形 区 域 宽 为 300 像素 ， 高 为 150 像素 ， 用 户 还 可 以 自 定义 具体 的 大 小 
或 者 设置 canvas 元 素 的 其 他 特性 。 在 页 面 中 加 入 了 canvas 元 素 后 ， 我 们 便 可 以 通过 JavaScript 来 自由 
地 控制 它 。 可 以 在 其 中 添加 图 片 、 线 条 以 及 文字 ， 也 可 以 在 里 面 绘图 ， 甚 至 还 可 以 加 入 高 级 动画 。 可 
放 到 HTML 页 面 中 的 最 基本 的 canvas 元 素 代码 如 下 所 示 。 


<canvas> </canvas> 


17.1.2 在 页 面 中 放置 canvas 元 素 


在 HTML 页 面 中 插入 canvas 元 素 是 非常 直观 和 简单 的 ， 如 下 面 的 代码 就 是 一 段 可 以 被 插入 到 
HTML 页 面 中 的 canvas 代码 。 


<canvas width="200" height="200"> </canvas> 


以 上 代码 会 在 页 面 上 显示 出 一 块 200 像素 X200 像素 的 “隐藏 ”区 域 。 假 如 要 为 其 增加 一 个 边框 ， 
可 以 用 标准 CSS 边框 属性 来 设置 。 代 码 如 下 。 

<canvas id="djx" style="border 1px solid;” width="200" height="200"> </canvas> 

在 上 面 的 代码 中 ， 不 但 用 CSS 边框 属性 设置 了 边框 ， 而 且 还 增加 了 一 个 值 为 “djx” 的 id 特性 ， 
这 样 做 的 主要 目的 是 为 了 在 开发 过 程 中 可 以 通过 id 来 快速 找到 该 canvas 元 素 。 对 于 任何 canvas 来 说 ， 
id 是 尤为 重要 的 , 这 主要 是 因为 对 canvas 元 素 的 所 有 操作 都 是 通过 脚本 代码 控制 的 , 如 果 没 有 id 的 话 ， 
想 要 找到 要 操作 的 canvas 元 素 会 很 难 。 

带 边框 的 canvas 元 素 ， 在 浏览 器 中 的 运行 效果 如 图 17.1 所 示 。 

例 17.1 在 已 创建 的 画布 上 绘制 一 条 斜 线 ， 其 实现 的 主要 步骤 如 下 所 示 。【〈 实 例 位置 ， 光盘 \ 
TMIsINI7\1) 
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首先 ， 通 过 引用 特定 的 canvas id 值 来 获取 对 canvas 对 象 的 访问 权 。 这 里 引用 的 id 为 djx。 接 着 定 
义 一 个 context 变量 , 调用 canvas 对 象 的 getContext 方法 ， 同 时 传 入 使 用 的 canvas 类 型 。 这 里 是 通过 传 
入 “2d” 来 获取 一 个 二 维 上 下 文 ， 这 也 是 到 目前 为 止 唯一 可 用 的 上 下 文 。 有 具体 代码 如 下 所 示 。 


var canvas = document.getElementByld('djx'); 
var context = canvas.getContext('2d'); 


接 下 来 ,基于 这 个 上 下 文 执行 画 线 的 操作 , 主要 是 调用 了 3 个 方法 一 一 beginpath、moveTo 和 lineTo， 
传 入 了 这 条 线 的 起 点 和 终点 的 坐标 。 具 体 代码 如 下 所 示 。 


context.beginPath(); 
context.moveTo(70, 140); 
context.lineTo(140, 70); 


最 后 ， 在 结束 canvas 操作 的 时 候 ， 通 过 调用 context.stroke0 方 法 完成 斜 线 的 绘制 。 具 体 代码 如 下 
所 示 。 


context. stroke(); 
window.addEventListener("load", drawDiagonal, true); 


在 canvas 中 绘制 的 斜 线 的 效果 如 图 17.2 所 示 。 


图 17.1 简单 的 canvas 元 素 图 17.2 在 canvas 中 绘制 的 斜 线 


17.1.3 绘制 带 边框 的 矩形 


例 17.2 本 例 将 详细 介绍 如 何在 canvas 画布 中 绘制 一 个 矩形 。 在 本 例 中 调用 了 脚本 文件 中 的 draw 
函数 进行 图 形 描绘 。 该 函数 放置 在 body 的 属性 中 ， 使 用 onload="draw('canvas");" 语 句 。 调 用 脚本 文件 
中 的 draw 函数 进行 图 像 绘 制 。 在 本 例 中 draw 函数 的 功能 是 把 canvas 画布 的 背景 用 浅 蓝 色 涂 满 ， 然 后 
画 出 一 个 绿色 正方 形 ， 其 边框 为 红色 。 (实例 位 置 ; 光盘 \TMNsIN17\2) 
canvas 元 素 绘制 矩形 的 具体 步骤 如 下 所 示 。 

(1) document.getElementById 方法 取得 canvas 元 素 ， 代 码 如 下 所 示 。 


var canvas = document.getElementByld(id); 
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(2) 使 用 canvas 对 象 的 getContext 方法 来 获得 图 形 上 下 文 。 同 时 传 入 使 用 的 canvas 类 型 ， 这 里 
传递 的 仍然 是 “2d”， 代 码 如 下 所 示 。 


var context = canvas.getContext('2d'); 


(3) 填充 与 绘制 边框 。 用 canvas 元 素 绘制 图 形 , 有 两 种 方式 一 一 填充 (fill) 与 绘制 边框 (stroke) : 
填充 是 指 填 满 图 形 内 部 ， 绘 制 边框 是 指 不 填 满 图 形 内 部 ， 只 绘制 图 形 的 外 框 。canvas 元 素 结合 使 用 这 
两 种 方式 来 绘制 图 形 。 

(4) 设 定 绘图 样式 〈style) 。 在 进行 图 形 绘制 的 时 候 ， 首 先 要 设 定好 绘图 的 样式 ， 然 后 调用 有 关 
方法 进行 图 形 的 绘制 。 所 谓 绘图 的 样式 ， 主 要 是 针对 图 形 的 颜色 而 言 的 ， 但 是 并 不 限于 图 形 的 颜色 ， 
在 后 面 将 会 介绍 如 何 设 定 颜色 以 外 的 样式 ， 本 例 中 主要 是 应 用 了 如 下 两 种 样式 。 

回 ” 设 定 填充 图 形 的 样式 

fillStyle 一 一 填充 的 样式 ， 在 该 属性 中 设置 填充 的 颜色 值 。 

设 定 图 形 边框 的 样式 

strokeStyle 一 一 图 形 边框 的 样式 ， 在 该 属性 中 设置 边框 的 颜色 值 。 
本 例 中 的 样式 代码 如 下 所 示 。 


context.fillStyle = "green"; 
context.strokeStyle = "red"; 


(5) 指定 线 宽 。 使 用 图 像 上 下 文 对 象 的 lineWidth 属性 设置 图 形 边框 的 宽度 。 在 绘制 图 形 的 时 候 ， 
任何 直线 都 可 以 通过 lineWidth 属性 来 指定 直线 的 宽度 。 本 例 中 设置 线 宽 的 代码 如 下 所 示 。 
context.lineWidth="1"; 


(6) 指 定 颜色 值 .绘图 时 填充 的 颜色 或 边框 的 颜色 分 别 通过 fillStyle 属性 与 strokeStyle 属性 来 指定 。 
颜色 值 使 用 的 是 普通 样式 表 中 使 用 的 颜色 值 。 例 如 “red” 或 “blue” 这 种 颜色 名 ， 或 “#EEEEFF” 这 
种 十 六 进 制 的 颜色 值 。 另 外 ， 也 可 以 通过 rgb 〈 红 色 值 、 绿 色 值 、 蓝 色 值 ) 或 rgba (红色 值 、 绿 色 值 、 
蓝 色 值 、 透 明度 ) 函数 来 指定 颜色 的 值 。 

(7) 矩形 的 绘制 。 分 别 使 用 flRect 方法 与 strokeRect 方法 来 填充 矩形 和 绘制 矩形 边框 。 这 两 个 方 
法 的 定义 如 下 所 示 。 


context.fillRect(x,y,width,height); 
context.strokeRect(x,y,width,height); 


这 里 的 context 指 的 是 图 形 上 下 文 对 象 ， 这 两 个 方法 使 用 同样 的 参数 ,x 是 指 矩形 起 点 的 横 坐 标 ，y 
是 指 矩 形 起 点 的 纵 坐 标 ， 坐 标 原 点 为 canvas 画布 的 最 左上 角 ，width 是 指 矩 形 的 长 度 ，height 是 指 矩形 
的 高 度 一 一 通过 这 4 个 参数 ， 和 矩形 的 大 小 就 被 决定 了 。 本 例 中 绘制 矩形 的 代码 如 下 所 示 。 


context.fillRect(50,50,100,100); 
context.strokeRect(50,50,100,100); 


本 例 中 绘制 的 矩形 效果 如 图 17.3 所 示 。 
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图 17.3 绘制 矩形 的 效果 


17.2 在 画布 中 使 用 路 径 


区 教学 录像 ， 光盘 VTMNI17\ 在 画布 中 使 用 路 径 .exe 


17.2.1 使 用 arc 方法 绘制 圆 形 


17.1 节 中 已 经 介绍 了 如 何 绘制 矩形 ， 下 面 来 看 一 下 如 何 绘制 矩形 以 外 的 图 形 〈 如 圆 形 ) 的 绘制 。 

要 想 绘制 其 他 图 形 ， 需 要 使 用 路 径 。 同 绘制 矩形 一 样 ， 绘 制 开始 时 还 是 要 取得 图 形 上 下 文 ， 然 后 
需要 执行 如 下 步骤 。 

(1) 开始 创建 路 径 。 

(2) 创建 图 像 的 路 径 。 

(3) 路 径 创 建 完成 后 ， 关 闭路 径 。 

(4) 设 定 绘制 样式 ， 调 用 绘制 方法 ， 绘 制 路 径 。 

从 上 述 步 又 中 可 以 看 出 首先 使 用 路 径 勾勒 图 形 轮廓 ， 然 后 设置 颜色 ， 进 行 绘制 。 

接 下 来 ， 我 们 用 一 个 实例 来 对 路 径 的 使 用 方法 进行 介绍 。 

例 17.3 调用 draw 函数 来 绘制 一 个 红色 的 圆 形 。《〈 实 例 位 置 ， 光盘 \TMNsIN17\3) 

下 面 是 本 例 实现 的 具体 过 程 。 

(1) 使 用 图 形 上 下 文 对 象 的 beginPath0 方 法 ， 该 方法 的 定义 如 下 所 示 。 


context.beginPath() 


该 方法 不 使 用 参数 。 通 过 调用 该 方法 ， 开 始 路 径 的 创建 。 
(2) 创建 圆 形 路 径 时 ， 需 要 使 用 图 形 上 下 文 对 象 的 act 方法。 该 方法 的 定义 如 下 所 示 。 
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context.arc(x,y,radius, startAngle, endAngle,anticlockwise) 

该 方法 使 用 6 个 参数 ，x 为 绘制 圆 形 的 起 点 横 坐 标 ，y 为 绘制 圆 形 的 起 点 纵 坐标 ，radius 为 圆 形 半 
径 ,startAngle 为 开始 角度 ,endAngle 为 结束 角度 , anticlockwise 为 是 否 按 顺 时 针 方 向 进行 绘制 ,在 canvas 
API 中 ， 绘 制 半径 与 弧 时 指定 的 参数 为 开始 弧度 与 结束 弧度 ， 如 果 习 惯 使 用 角度 ， 请 使 用 如 下 所 示 的 
方法 将 弧度 转换 为 角度 。 

var radians =degrees*Math.PIl/180 


其 中 Math.PI 表示 角度 为 180 度 ，Math.PI*2 表示 角度 为 360 度 。 

arc 方法 不 仅 可 以 用 来 绘制 圆 形 ， 也 可 以 用 来 绘制 圆 弧 。 使 用 时 必须 指定 开始 角度 与 结束 角度 ， 因 
为 这 两 个 角度 决定 了 弧度 。Anticlockwise 参数 为 一 个 布尔 值 的 参数 ， 参 数值 为 tue 时 ， 按 顺 时 针 绘制 ， 
参数 值 为 false 时 ， 按 逆 时 针 方向 绘制 。 

本 例 中 绘制 圆 形 的 代码 如 下 所 示 。 

context.arc( 100, 100, 75, 0, Math.PI* 2, true); 

(3) 关闭 路 径 ， 路 径 创 建 完成 后 ， 使 用 图 形 上 下 文 对 象 的 closePath 方法 将 路 径 关 闭 。 该 方法 定 
义 如 下 所 示 。 

context.closePath(); 

将 路 径 关 闭 后 ， 路 径 的 创建 工作 就 完成 了 。 但 是 需要 注意 的 是 ， 这 时 只 是 路 径 创建 完毕 而 已 ， 还 
没有 真正 绘制 图 形 。 

(4) 进行 圆 形 绘制 ， 并 设 定 绘制 样式 。 实 现 的 代码 如 下 所 示 。 


context.fillStyle = rgba(255, 0, 0, 0.25)'; 
context.fill(); 


绘制 完成 的 圆 形 在 浏览 器 中 的 效果 如 图 17.4 所 示 。 


] 


和 只 癌 9 | 时 了 IE lccehox/Dy | 只 -| 可 


canvas 中 画 圆 形 


图 17.4 使 用 路 径 绘制 圆 形 
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17.2.2 ”使 用 moveTo 与 lineTo 路 径 绘制 火柴 人 


接 下 来 ， 我 们 来 看 一 下 除了 arc 方法 以 外 ， 其 他 使 用 路 径 绘制 图 形 时 会 使 用 到 的 方法 。 

moveTo(x,y): 不 绘制 ， 只 是 将 当前 位 置 移动 到 新 的 目标 坐标 (x,y)。 

lineTo(x,y): 不 仅 将 当前 位 置 移动 到 新 的 目标 坐标 (x,y)， 而 且 在 两 个 坐标 之 间 画 一 条 直线 。 

简 而 言 之 ， 上 面 两 个 函数 的 区 别 在 于 : moveTo 就 像 是 提起 画笔 ， 移 动 到 新 位 置 ， 而 lineTo 告诉 canvas 
用 画笔 从 纸 上 的 旧 坐标 画 条 直线 到 新 坐标 。 需 要 注意 的 是 ， 此 时 不 管 调用 哪 一 个 方法 ， 都 不 会 真正 画 出 图 
形 ， 因 为 还 没有 调用 stroke 或 者 fl 函数。 目前， 只 是 在 定义 路 径 的 位 置 ， 以 便 后 面 绘制 时 使 用 。 

再 来 看 一 个 特殊 的 路 径 函 数 一 一 closePath。 这 个 函数 的 行为 和 lineTo 很 像 ， 唯 一 的 差别 在 于 closePath 
会 将 路 径 的 起 始 坐标 自动 作为 目标 坐标 。closePath 还 会 通知 canvas 当前 绘制 的 图 形 已 经 闭合 或 者 形成 
了 完全 封闭 的 区 域 ， 这 对 将 来 的 填充 和 描 边 都 非常 有 用 。 

此 时 ,可 以 在 已 有 的 路 径 中 继续 创建 其 他 的 子路 径 , 或 者 随时 调用 beginPath 重新 绘制 新 路 径 并 完 
全 清除 之 前 的 所 有 路 径 。 

例 17.4” ”下面 应 用 canvas 的 arc、moveTo、 lineTo 方法 来 绘制 一 个 火柴 人 。( 实 例 位 置 : 光盘 \TMNsNI7M4) 

具体 操作 步骤 如 下 。 

(1) 通过 document.getElementById 方法 取得 canvas 元 素 ， 然 后 使 用 canvas 对 象 的 getContext 方 
法 来 获得 图 形 上 下 文 ， 与 此 同时 传 入 使 用 的 “2d” 的 canvas 类 型 。 代 码 如 下 所 示 。 


var canvas = document.getElementByld(id); 
var context = canvas.getContext('2d'); 


(2) 创建 一 个 300 像素 X300 像素 ， 背 景 为 蓝 色 的 画布 。 代 码 如 下 所 示 。 


context.fillStyle = "#EEEEFF"; 
context.fillRect(0, 0, 300, 300); 


(3) 使 用 图 形 上 下 文 对 象 的 act 方法 创建 “火柴 人 的 头 部 ”路 径 。 这 里 是 一 个 空心 的 ， 边 框 为 
3 的 红色 圆 形 。 其 实现 的 代码 如 下 所 示 。 
context.beginPath(); 
context.strokeStyle = ‘#c00"; 
context.lineWidth = 3; 
context.arc(100, 50, 30, 0, Math.Pl*2, true); 
context.fill(); 
context. stroke(); 
(4) 火柴 人 的 头 部 绘制 好 以 后 ， 接 下 来 绘制 火柴 人 的 脸 部 。 这 里 主要 是 绘制 红色 的 眼睛 和 嘴 
当 绘制 脸 部 的 时 候 ， 需 要 再 次 使 用 beginPath。 这 主要 是 为 了 让 脸 部 的 路 径 与 头 部 的 路 径 分 离开 。 
特征 中 嘴 实 现 的 代码 如 下 所 示 。 
context.beginPath(); 


context.strokeStyle = ‘#c00"; 
context.lineWidth = 3; 
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context.arc(100, 50, 20, 0, Math.Pl, false); 
context.fill(); 
context.stroke(); 


(5) 接 下 来 再 创建 一 个 新 的 路 径 来 绘制 眼睛 。 先 绘制 左 眼 ， 也 就 是 绘制 一 个 圆 形 并 通过 fillStyle 


方法 为 其 填充 为 红颜 色 ， 然 后 使 用 moveTo 方法 “ 抬 起 ”画笔 来 绘制 右 眼 。 眼 睛 实现 


context.beginPath(); 

context.fillStyle = #c00'; 

context.arc(90, 45, 3, 0, Math.Pl*2, true); 
context.fill(); 

context.stroke(); 

context.moveTo(113, 45); 
context.arc(110, 45, 3, 0, Math.Pl*2, true); 
context.fill(); 

context.stroke(); 


的 代码 如 下 所 示 。 


(6) 头 部 绘制 完成 后 ， 接 下 来 绘制 身体 主要 是 上 肢 和 下 肢 的 绘制 。 在 绘制 身体 的 部 分 时 ， 多 次 应 


了 moveTo 和 lineTo 方法 。 具 体 实 现 的 代码 如 下 所 示 。 


context.beginPath(); 
context.moveTo(100, 80); 
context.lineTo(100, 180); 


context.lineTo(75, 250); /绘制 左 腿 
context.moveTo(100, 180); 

context.lineTo(125, 250); // 绘 制 右 腿 
context.moveTo(100, 90); 

context.lineTo(75, 140); // 绘 制 左 用 膊 
context.moveTo(100, 90); 

context.lineTo(125, 140); // 绘 制 右 用 膊 


context.stroke(); 


(7) 最 后 关闭 路 径 ， 路 径 创 建 完成 后 ， 使 用 图 形 上 下 文 对 象 的 closePath 方法 将 路 径 关 闭 。 因 为 


绘制 的 火柴 人 的 每 一 部 分 都 是 路 径 的 一 个 独立 的 子路 径 ， 都 能 独立 绘制 。 因 此 只 要 在 


即 可 ， 无 须 调用 fl 方法 或 者 stroke 方法 来 执行 绘制 。 
绘制 的 火柴 人 在 浏览 器 中 的 效果 如 图 17.5 所 示 。 


ae 


人 


canvas 中 绘制 火柴 人 


图 17.5 使 用 路 径 绘制 火柴 人 


E 结 尾 处 关闭 路 径 
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17.2.3” 贝 塞 尔 和 二 次 方 曲线 


贝 塞 尔 曲线 可 以 是 二 次 或 三 次 方 的 形式 ， 常 用 于 绘制 复杂 而 有 规律 的 形状 。 

绘制 贝 塞 尔 曲线 主要 使 用 bezierCurveTo 方法 。 该 方法 可 以 说 是 lineTo 的 曲线 版 ， 将 从 当前 坐标 点 
到 指定 坐标 点 中 间 的 贝 塞 尔 曲线 追加 到 路 径 中 。 该 方法 的 定义 如 下 所 示 。 

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 


该 方法 使 用 6 个 参数 。 绘 制 贝 塞 尔 曲线 的 时 候 ， 需 要 两 个 控制 点 ，cplx 为 第 一 个 控制 点 的 横 坐标 ， 
cply 为 第 一 个 控制 点 的 纵 坐 标 ; cp2x 为 第 二 个 控制 点 的 横 坐 标 ，cp2y 为 第 二 个 控制 点 的 纵 坐 标 ，x 为 
贝 塞 尔 曲线 的 终点 横 坐 标 ，y 为 贝 塞 尔 曲线 的 终点 纵 坐标 。 

绘制 二 次 样 条 曲线 ， 使 用 的 方法 是 quadraticCurveTo。 该 方法 的 定义 如 下 所 示 。 

quadraticCurveTo(cp1x, cp1y, x, y) 


两 种 方法 的 区 别 如 图 17.6 所 示 。 它 们 都 是 一 个 起 点 一 个 终点 (图 中 的 蓝 点 ) ， 但 二 次 方 贝 塞 尔 曲 
线 只 有 一 个 (红色 ) 控制 点 ， 而 三 次 方 贝 塞 尔 曲线 有 两 个 。 

参数 x 和 y 是 终点 坐标 , cplx 和 cply 是 第 一 个 控制 点 的 坐标 , cp2x 和 cp2y 是 第 二 个 控制 点 
的 坐标 。 


quadratic curve 


mn LL 


图 17.6 bezierCurve 与 quadraticCurve 的 区 别 


例 17.5 本 例 中 使 用 bezierCurveTo 方法 绘制 一 个 实心 的 红心 。《〈 实 例 位置 ， 光盘 \TMNsINI7\S) 
其 实现 的 主要 代码 如 下 所 示 。 


context.beginPath(); 

context.fillStyle = #c00'; 

context.strokeStyle = #c00"; 
context.moveTo(75,40); 
context.bezierCurveTo(75,37,70,25,50,25); 
context.bezierCurveTo(20,25,20,62.5,20,62.5); 
context.bezierCurveTo(20,80,40,102,75,120); 
context.bezierCurveTo(110,102,130,80,130,62.5); 
context.bezierCurveTo(130,62.5,130,25,100,25); 
context.bezierCurveTo(85,25,75,37,75,40); 
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context.fill(); 
context. stroke(); 


从 上 面 的 代码 可 以 看 出 ， 红 心 的 绘制 主要 是 多 次 使 用 了 三 次 方 贝 塞 尔 曲线 绘制 的 。 其 运行 效果 如 
图 17.7 所 示 。 
17.6 ”下面 再 来 看 一 下 使 用 quadraticCurveTo 方法 绘制 二 次 方 曲线 的 实例 。 本 例 主 要 是 绘制 了 
个 用 于 解释 说 明 的 对 话 框 。〈 实 例 位 置 ; 光盘 \TMNsN17\6) 
其 实现 的 主要 代码 如 下 所 示 。 


context.beginPath(); 
context.moveTo(75,25); 

context. strokeStyle = #c00'; 
context.quadraticCurveTo(25,25,25,62.5); 
context.quadraticCurveTo(25,100,50,100); 
context.quadraticCurveTo(50,120,30,125); 
context.quadraticCurveTo(60,120,65,100); 
context.quadraticCurveTo(125,100,125,62.5); 
context.quadraticCurveTo(125,25,75,25); 
context.stroke(); 

context.fill(); 


本 例 在 浏览 器 中 实现 的 效果 如 图 17.8 所 示 。 
区 cp J 7 
|© -ov 元 94 


“oO o Stw lochosy/DY 


canvas 中 绘制 红心 | 


这 


中 司 go | te bocahowuDy 


canvas 中 绘制 对 话 框 


图 17.7 使 用 贝 塞 尔 曲 线 绘制 的 红心 图 17.8 二 次 方 曲线 绘制 的 实例 
17.3 运用 样式 与 颜色 


网 4 教学 录像 : 光盘 \TMNIXIT\ 运 用 样式 与 颜色 .exe 


17.3.1 fillStyle 和 strokeStyle 属性 


在 前 面 的 章节 中 ， 在 绘制 图 形 时 只 用 到 默认 的 线条 和 填充 样式 ， 而 在 本 节 将 会 探讨 canvas 全 部 的 
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可 选项 ， 来 绘制 出 更 加 吸引 人 的 内 容 。 如 果 想 要 给 图 形 上 色 ， 有 两 个 重要 的 属性 可 以 做 到 : fillStyle 和 
strokeStyle。 这 两 个 属性 的 定义 方法 如 下 所 示 。 


fillStyle = color 
strokeStyle = color 


fillStyle 用 于 设置 填充 颜色 ， 而 strokeStyle 用 于 设置 图 形 轮廓 的 颜色 。color 可 以 是 表示 CSS 颜色 值 
的 字符 串 、 渐 变 对 象 或 者 图 案 对 象 。 渐 变 和 图 案 对 象 将 在 后 面 的 章节 中 进行 讲解 。 默 认 情 况 下 ， 线 条 和 填 
充 颜色 都 是 黑色 (CSS 颜色 值 #000000) 。 这 里 需要 注意 的 是 如 果 自 定义 颜色 则 应 该 保证 输入 符合 CSS 颜 
色 值 标准 的 有 效 字符 串 。 下 面 的 代码 都 是 符合 标准 的 颜色 表示 方式 ， 都 表示 同一 种 颜色 〈 橙 色 ) 。 

context.fillStyle = "orange"; 

context.fillStyle = "#FFA500"; 


context.fillStyle = "rgb(255,165,0)"; 
context.fillStyle = "rgba(255,165,0,1)"; 


全 6 注意 “= strokeStyle 或 者 fillStyle 的 值 ， 那 么 这 个 新 值 就 会 成 为 新 绘制 的 图 形 的 默认 
值 。 如 果 想 要 给 每 个 图 形 上 不 同 的 颜色 ， 就 需要 重新 设置 fillStyle 或 strokeStyle 的 值 。 


例 17.7 ”下面 先 来 看 一 下 fillStyle 实例 。 本 实例 将 使 用 两 层 for 循环 来 绘制 方 格 阵列 ， 每 个 方 格 
使 用 不 同 的 颜色 。 本 实例 的 效果 如 图 17.9 所 示 。 《实例 位 置 : 光盘 \TMNsIN17\7) 


图 17.9 利用 fillstyle 属性 绘制 的 调 色 板 
从 效果 图 可 以 看 出 色彩 很 绚丽 ， 其 实 实现 的 代码 很 简单 ， 只 需要 通过 变量 i 和 j 来 为 每 一 个 方 格 产 
生 唯 一 的 RGB 色彩 值 。 其 中 仅 修 改 红色 和 绿色 的 值 ， 保 持 蓝 色 的 值 不 变 。 就 可 以 通过 修改 这 些 颜色 的 
值 来 产生 各 种 各 样 的 色 块 。 其 实现 的 主要 代码 如 下 所 示 。 
function draw(id) 


{ 
var canvas = document.getElementByld(id); 
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var context = canvas.getContext('2d"); 
for (var i=0;i<6;i++X{ 
for (var j=0;j<6;j++\{ 
context.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*)) + ',0)'; 
context.fillRect(j*25,i*25,25,25); 
} 
} 
bl 


例 17.8 下 面 再 来 看 一 下 strokeStyle 实例 。 与 例 17.7 有 点 类 似 ， 但 它 用 到 的 是 strokeStyle 属性 ， 
通过 arc 方法 来 画 圆 。〈 实 例 位 置 : 光盘 \TMNsIN17\8) 
其 实现 的 主要 代码 如 下 所 示 。 


function draw(id) { 
var context = document.getElementByld('canvas').getContext('2d'); 
for (var i=0i;i<6;i++)f 
for (var j=0;j<6;j++)f 
context.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ', + 
Math.floor(255-42.55j) + ")'; 
context.beginPath(); 
context.arc(12.5+j*25,12.5+i*25,10,0,Math.Pl*2,true); 
context.stroke(); 
} 
} 
} 


这 个 实例 的 效果 如 图 17.10 所 示 。 


= 


[D strokeStyle 


[DD -六 -|c|[ 本 - 


strokeStyle 实 例 


图 17.10 strokeStyle 实例 效果 


17.3.2 透明度 globalAlpha 


除了 可 以 绘制 实 色 图 形 ， 还 可 以 用 canvas 来 绘制 半 透明 的 图 形 。 通 过 设置 globalAlpha 属性 或 者 使 用 
一 个 半 透 明 颜 色 作为 轮廓 或 填充 的 样式 来 绘制 透明 或 半 透 明 的 图 形 。globalAlpha 属性 定义 代码 如 下 所 示 。 
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globalAlpha = transparency value 


这 个 属性 影响 到 canvas 里 所 有 图 形 的 透明 度 , 在 需要 绘 和 
其 有 效 的 值 范 围 是 0.0〈 完 全 透明 ) 到 1.0〈 完 全 不 透明 ) ， 
下 面 通过 一 个 实例 来 了 解 一 下 globalAlpha 属性 的 应 用 。 


所 大 量 拥有 相同 透明 度 的 图 形 时 相当 高 效 ， 
默认 值 是 1.0。 
(实例 位 置 : 光盘 \TMNsSN17\9) 


例 17.9 本 例 中 用 四 色 格 作为 背景 ， 设 置 globalAlpha 为 0.3 后 ， 画 一 系列 半径 递增 的 半 透 明 圆 。 
最 终结 果 是 一 个 径 向 渐变 效果 。 贺 到 加 得 越 多 ， 原 先 所 画 的 圆 的 透明 度 就 会 越 低 。 通 过 增加 循环 次 数 ， 


画 更 多 的 圆 ， 图 的 中 心 部 分 会 完全 消失 。 
其 实现 的 主要 代码 如 下 所 示 。 


function draw(id) { 


var context = document.getElementByld('canvas').getContext('2d'); 


context.fillStyle = #FDO'; 
context.fillRect(0,0,75,75); 
context.fillStyle = #6C0"; 
context.fillRect(75,0,75,75); 
context.fillStyle = ‘#09F'; 
context.filRect(0,75,75,75); 
context.fillStyle = #F30'; 
context.fillRect(75,75,75,75); 
context.fillStyle = #FFF'; 
context.globalAlpha = 0.3; 
for (var i=0;i<7,i++X{ 
context.beginPath(); 


context.arc(75,75,10+10*i,0,Math.Pl*2,true); 


context.fill(); 
} 
} 


本 实例 运行 效果 如 图 17.11 所 示 。 


和 中 悦 o | 加 本 地 [localhosyDY/ 


globalAlpha 属性 实例 
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17.3.3” 线 型 Line styles 


线 型 包括 如 下 属性 。 
lineWidth = value 
lineCap = type 
lineJoin = type 
miterLimit = value 
通过 这 些 属性 来 设置 线 的 样式 。 下 面 将 结合 实例 来 讲解 各 属性 的 应 用 及 应 用 后 的 效果 。 
回 lineWidth 属性 
该 属性 设置 当前 绘 线 的 粗细 ， 属 性 值 必须 为 正 数 ， 默 认 值 是 1.0。 线 宽 是 指 给 定 路 径 的 中 心 到 两 边 
的 粗细 。 换 句 话说 就 是 在 路 径 的 两 边 各 绘制 线 宽 的 一 半 。 因 为 画布 的 坐标 并 不 和 像素 直接 对 应 ， 当 需 
要 获得 精确 的 水 平 线 或 垂直 线 的 时 候 要 特别 注意 。 
例 17.10 在 下 面 的 例子 中 用 递增 的 宽度 绘制 了 10 条 直线 ， 最 左边 的 线 宽 1.0 单位 。 (实例 位 置 ; 
光盘 \TMINsINI7\10) 
其 实现 的 主要 代码 如 下 所 示 。 
for (vari = 0; i < 10; i++){ 
context.lineWidth = 1+i; 
context.beginPath(); 
context.strokeStyle = ‘#c00'; 
context.moveTo(5+i*14,5); 
context.lineTo(S+i*14,140); 
context.stroke(); 
} 


本 实例 运行 效果 如 图 17.12 所 示 。 


中 问 9- | 司 本 地 localhosyDY 


lineWidth 属性 实例 


® 50|. 


器 


17.12 设置 不 同 值 的 lineWidth 效果 


回 lineCap 属性 
该 属性 决定 了 线段 端点 显示 的 样式 。 它 可 以 为 下 面 的 3 种 值 之 一 : butt、round 和 square， 默 认 是 butt。 
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例 17.11 在 下 面 的 例子 中 ， 绘 制 了 3 条 直线 ， 分 别 赋予 不 同 的 lineCap 值 。 为 了 可 以 看 清楚 它们 


司 
如 图 17.13 所 示 。 (实例 位 置 : 光盘 \TM'sINI7\11) 


© 中 OD om #8 |locahost/D/ 


lineCap 属 性 实例 


图 17.13 ”lineCap 属性 的 赋值 的 3 种 效果 


的 区 别 ， 另 外 添加 两 条 辅助 线 ， 且 让 这 3 条 直线 的 起 点 和 终点 都 落 在 辅助 线 上 。 这 个 实例 的 效果 


从 图 17.13 中 可 以 看 出 ， 最 左边 的 线 用 了 默认 的 butt， 可 以 注意 到 它 与 辅助 线 是 齐 平 的 ; 中 间 的 是 
round 的 效果 ， 端 点 处 加 上 了 半径 为 一 半 线 宽 的 半圆 。 右 边 的 是 square 的 效果 ， 端 点 处 加 上 了 等 宽 且 


高 度 为 一 半 线 宽 的 方块 。 其 实现 的 代码 如 下 所 示 。 


context.strokeStyle = #09f; 
context.beginPath(); 
context.moveTo(10,10); 
context.lineTo(140,10); 
context.moveTo(10,140); 
context.lineTo(140,140); 
context.stroke(); 


context.strokeStyle = 'black'; 

for (var i=0i;i<lineCap.length;i++)f 
context.lineWidth = 15; 
context.lineCap = lineCaplil]; 
context.beginPath(); 
context.moveTo(25+i*50,10); 
context.lineTo(25+i*50,140); 
context.stroke(); 


} 
lineJoin 属性 


该 属性 值 决 定 了 图 形 中 两 线段 连接 处 所 显示 的 样子 ， 具 体 有 3 种 取 值 : round、bevel 和 miter， 默 


认 值 是 miter。 


例 17.12 在 下 面 的 实例 中 绘制 了 3 条 折线 ， 分 别 设置 不 同 的 lineJoin 值 。 最 上 
效果 ， 边 角 处 被 磨 圆 了 ， 圆 的 半径 等 于 线 宽 ; 中间 和 最 下 面 一 条 分 别 是 bevel 和 miter 


条 是 round 的 
的 效果 。 这 里 需 


要 注意 的 是 ， 当 值 为 miter 时 ， 线 段 会 在 连接 处 外 侧 延 伸 直至 交 于 一 点 ， 延 伸 效 果 受 到 
的 制约 。 本 实例 运行 效果 如 图 17.14 所 示 。〔 实 例 位 置 ， 光盘 \TMN\sN17\12) 
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图 17.14 lineJoin 属性 的 3 个 值 的 运行 效果 


从 图 17.14 中 可 以 看 出 应 用 miter〈 最 下 面 的 一 条 ) 的 效果 ， 线 段 的 外 侧 边缘 会 延伸 交 于 一 点 上 。 
线段 直接 夹 角 比 较 大 的 ， 交 点 不 会 太 远 ; 但 当 夹 角 减 少时 ， 交 点 距离 会 呈 指 数 级 增 大 。miterLimit 属 
性 就 是 用 来 设 定 外 延 交点 与 连接 点 的 最 大 距离 ， 如 果 交 点 距离 大 于 此 值 ， 连 接 效果 会 变 成 bevel。 本 例 
实现 的 主要 代码 如 下 所 示 。 


var lineJoin = [round',bevel,,miter]; 
context.strokeStyle = ‘#09f; 
context.lineWidth = 10; 
for (var i=0ii<lineJoin.length;i++)f 
context.lineJoin = lineJoin[i]; 
context.beginPath(); 
context.moveTo(-5,5+i*40); 
context.lineTo(35,45+i*40); 
context.lineTo(75,5+i*40); 
context.lineTo(115,45+i*40); 
context.lineTo(155,5+i*40); 
context.stroke(); 


17.4 绘制 渐变 图 形 
咒 4 教学 录像 : 光盘 \TMNPA17\ 绘 制 渐变 图 形 .exe 


17.4.1 绘制 线性 渐变 


前 面 讲 过 ， 可 以 使 用 fnlStyle 方法 在 填充 时 指定 填充 的 颜色 。 使 用 该 方法 ， 除 了 指定 颜色 之 外 , 还 
可 以 用 来 指定 填充 的 对 象 。 
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渐变 是 指 在 填充 时 从 一 种 颜色 慢 慢 过 渡 到 另外 一 种 的 颜色 。 渐 变 分 为 几 种 ， 我 们 先 介绍 一 下 最 简 
单 的 两 点 之 间 的 线性 渐变 。 

绘制 线性 渐变 时 ， 需 要 使 用 到 LinearGradient 对 象 。 使 用 图 像 上 下 文 对 象 的 createLinearGradient 
方法 创建 该 对 象 。 该 方法 的 定义 如 下 所 示 。 

context.createLinearGradient(xStart,yStart,xEnd,yEnd) 


该 方法 使 用 4 个 参数 ，xStart 为 渐变 起 始点 的 横 坐 标 ，yStart 为 渐变 起 始点 的 纵 坐标 ，xEnd 为 渐变 
结束 点 的 横 坐 标 ，yEnd 为 渐变 结束 点 的 纵 坐 标 。 

通过 使 用 该 方法 , 创建 了 一 个 使 用 两 个 坐标 点 的 LinearGradient 对 象 。 那 么 ， 渐 变 的 颜色 该 怎么 设 
定 呢 ?在 LinearGradient 对 象 后 ， 使 用 addColorStop 方法 进行 设 定 ， 该 方法 的 定义 如 下 所 示 。 

context. addColorStop(offset,color) 


使 用 这 个 方法 可 以 追加 渐变 的 颜色 。 该 方法 使 用 两 个 参数 一 一 offset 和 color。offset 为 所 设 定 的 颜 
色 离 开 渐变 起 始点 的 偏 移 量 。 该 参数 的 值 是 一 个 范围 在 0 到 1 之 间 的 浮 点 值 ,渐变 起 始点 的 偏 移 量 为 0， 
渐变 结束 点 的 偏 移 量 为 1。 

例 17.13 ”下面 通过 一 个 简单 的 线性 渐变 的 实例 来 介绍 一 下 绘制 渐变 的 步骤 和 原理 , 该 实例 是 由 上 
到 下 、 由 黑色 到 和 白色 的 线性 渐变 。 (实例 位 置 : 光盘 \TMNsIN17\13) 

其 具体 的 实现 步骤 如 下 所 示 。 

(1) 创建 一 个 像素 为 150， 由 上 到 下 的 线性 渐变 。 实 现 的 代码 如 下 所 示 。 


var lingrad = context.createLinearGradient(0,0,0,150); 


(2) 设置 了 渐变 对 象 后 ， 接 下 来 就 是 定义 渐变 的 颜色 了 。 一 个 渐变 可 以 有 两 种 或 多 种 色彩 变化 。 
沿 着 渐变 方向 颜色 可 以 在 任何 地 方 变化 。 要 增加 一 种 颜色 变化 ， 需 要 指定 它 在 渐变 中 的 位 置 。 渐 变 位 
置 可 以 在 0 到 1 之 间 任意 取 值 。 本 例 中 定义 一 个 渐变 ， 色 调 从 黑 到 
过 渡 ， 实 现 的 代码 如 下 所 示 。 


lingrad.addColorStop(0,'black'); 
lingrad.addColorStop(1, ‘white'); 


(3) 定义 了 一 种 渐变 后 ， 它 只 是 保存 在 内 存 当 中 ， 而 不 会 直接 在 
canvas 上 夯 出 任何 东西 。 要 让 颜色 渐变 产生 实际 效果 , 就 需要 为 这 个 渐 
变 对 象 设置 图 形 的 fnlStyle 属性 ， 并 绘制 这 一 图 形 ， 如 矩形 或 直线 。 其 
实现 的 主要 代码 如 下 所 示 。 

context.fillStyle = lingrad; 

context.filRect(10,10,130,130); 


本 例 中 绘制 的 线性 渐变 ， 运 行 效果 如 图 17.15 所 示 。 图 17.15 由 上 到 下 的 线性 渐变 


17.4.2 ”绘制 径 向 渐变 


使 用 canvas API， 除 了 可 以 绘制 线性 渐变 ， 还 可 以 绘制 径 向 渐变 。 径 向 渐变 是 指 以 圆心 沿 着 圆 形 
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就 是 一 种 径 向 渐变 。 


context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd) 
该 方法 使 用 6 个 参数 ，xStart 为 渐变 开始 圆 
radiusStart 为 开始 圆 
为 结束 圆 的 半径 。 
在 这 个 方法 中 ， 
扩散 到 第 二 个 圆 的 外 轮廓 处 。 


分 别 指定 了 两 个 


的 大 小 与 位 置 。 从 第 一 个 圆 的 圆 


上 下 文 对 象 的 createLinearGradient 方法 绘制 径 向 渐变 ， 该 方法 的 定义 如 下 


的 圆心 横 坐 标 ，yStart 为 渐变 开始 圆 的 圆 
的 半径 ，xEnd 为 渐变 结束 圆 的 圆心 横 坐 标 , yEnd 为 渐变 结 


9 半径 方向 向 外 进行 扩散 的 渐变 方式 。 如 在 绘制 太阳 时 ， 沿 着 太阳 的 半径 方向 向 外 扩散 出 去 的 光 晕 ， 


所 示 。 


心 纵 坐 标 ， 


洁 束 圆 的 坐标 ，radiusEnd 


心 处 向 外 进行 扩散 渐变 ， 一 直 


在 设 定 颜色 时 ， 与 线性 渐变 相同 ， 使 
间 的 浮 点 数 作为 渐变 转折 点 的 偏 移 量 。 
例 17.14 下 


的 是 addColorStop 方法 进行 设 定 。 


例 位 置 ， 光盘 \TM\sN\17\14) 
实现 本 例 的 主要 代码 如 下 所 示 。 


function draw(id) { 
var context = document.getElementByld(‘canvas').getContext('2d"); 
var radgrad = context.createRadialGradient(45,45,10,52,50,30); 
radgrad.addColorStop(0, #A7D30C); 
radgrad.addColorStop(0.9, #019F62'); 
radgrad.addColorStop(1, "rgba(1,159,98,0)); 
var radgrad2 = context.createRadialGradient(105,105,20,112,120,50); 
radgrad2.addColorStop(0, #FF5F98"); 
radgrad2.addColorStop(0.75, #FF0188"); 
radgrad2.addColorStop(1, 'rgba(255,1,136,0)"); 
var radgrad3 = context.createRadialGradient(95,15,15,102,20,40); 
radgrad3.addColorStop(0, #00C9FF"); 
radgrad3.addColorStop(0.8, ‘#00B5E2"); 
radgrad3.addColorStop(1, rgba(0,201,255,0)); 
var radgrad4 = context.createRadialGradient(0,150,50,0,140,90); 
radgrad4.addColorStop(0, #F4F201"); 
radgrad4.addColorStop(0.8, #E4C700"); 
radgrad4.addColorStop(1, 'rgba(228,199,0,0)"); 


context.fillStyle = radgrad4; 
context.fillRect(0,0,150,150); 
context.fillStyle = radgrad3; 
context.fillRect(0,0,150,150); 
context.fillStyle = radgrad2; 
context.fillRect(0,0,150,150); 
context.fillStyle = radgrad; 
context.fillRect(0,0,150,150); 


同样 是 需要 设 定 0~1 之 


来 看 一 个 绘制 径 向 渐变 的 例子 。 本 例 中 定义 了 4 个 不 同 的 径 向 渐变 , 设置 起 点 稍微 
偏离 终点 ， 并 且 4 个 径 向 渐变 效果 的 最 后 一 个 色 标 都 是 透明 色 ， 这 样 就 能 制造 出 球状 3D 效果 。 


( 实 
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本 例 运行 效果 如 图 17.16 所 示 。 


图 17.16 绘制 径 向 渐变 产生 的 类 似 3D 效果 
17.5 绘制 变形 图 形 
区 4 教学 录像 : 光盘 \TMNIC17\ 绘 制 变形 图 形 .exe 


17.5.1 坐标 的 变换 


绘制 图 形 的 时 候 ， 经 常会 对 绘制 的 图 形 进行 变化 ， 如 旋转 。 使 用 canvas API 的 坐标 轴 变 换 处 理 功 
能 ， 可 以 实现 这 种 效果 。 

如 果 对 坐标 进行 变换 处 理 ， 就 可 以 实现 图 像 的 变形 了 。 对 坐标 的 变换 处 理 ， 有 如 下 3 种 方式 。 

平移 

移动 图 形 的 绘制 主要 是 通过 translate 方法 来 实现 的 。 该 方法 定义 如 下 所 示 。 

context. translate(x, y); 


translate 方法 使 用 两 个 参数 ，x 表示 将 坐标 轴 原 点 向 左 移动 若干 个 单位 ， 默 认 情 况 下 为 像素 , y 表 
示 将 坐标 轴 原 点 向 下 移动 若干 个 单位 。 

缩放 

使 用 图 形 上 下 文 对 象 的 scale 方法 将 图 形 缩放 。 该 方法 的 定义 如 下 所 示 。 

context.scale(x,y); 

scale 方法 使 用 两 个 参数 ，x 是 水 平方 向 的 放大 倍数 ，y 是 垂直 方向 的 放大 倍数 。 若 要 将 图 形 缩小 ， 
设置 这 两 个 参数 为 0 一 1 之 间 的 小 数 即 可 ， 例 如 ，0.5 是 指 将 图 形 缩小 一 半 。 

加 ”旋转 

使 用 图 形 上 下 文 对 象 的 rotate 方法 将 图 形 进行 旋转 。 该 方法 的 定义 如 下 所 示 。 

context.rotate(angle); 


rotate 方法 只 有 一 个 参数 一 一 angle， 即 旋转 的 角度 ， 旋 转 的 中 心 点 是 坐标 轴 的 原点 。 旋 转 是 以 顺 时 
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针 方 向 进行 的 ， 要 想 逆 时 针 旋转 时 ， 将 angle 设 定 为 负数 就 可 以 了 。 

例 17.15 下 面 将 通过 实例 来 具体 讲解 如 何 利用 坐标 变换 的 方法 绘制 变形 的 图 形 。 本 例 中 首先 绘制 
了 一 个 和 矩形， 然后 在 一 个 循环 中 反复 使 用 平移 坐标 轴 、 图 形 的 缩放 、 图 形 旋转 这 3 种 方法 ， 最 后 绘制 
出 一 个 非常 漂亮 的 变形 图 形 。〔 实 例 位 置 : 光盘 \TMN\sN17\15) 

实现 本 例 的 主要 代码 如 下 所 示 。 


function draw(id) 
{ 


var canvas = document.getElementByld(id); 
if (canvas == null) 


return false; 
var context = canvas.getContext('2d"); 
context.fillStyle = "#FFF"; // 设 置 背景 色 为 白色 
context.filRect(0, 0, 400, 300); /创建 一 个 画布 
/图 形 绘制 
context.translate(200,50); 
context.fillStyle = "rgba(255,0,0,0.25) 
for(vari = 0;i < 50;i++) 
{ 
context.translate(25,25); /图 形 向 左 ， 向 下 各 移动 25 
context.scale(0.95,0.95); /| 图 形 缩放 
contextrotate(Math.PI / 10); // 图 形 旋转 


context.fillRect(0,0,100,50); 


} 


这 个 实例 的 运行 效果 如 图 17.17 所 示 。 
Dy pers J 


图 17.17 应 用 图 形 的 平移 、 缩 放 、 旋 转 绘制 的 变形 效果 
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17.5.2 ”矩阵 变换 


足 需 要 时 ， 就 可 以 利用 和 矩阵 变换 的 技术 。 下 面 将 介绍 利用 矩阵 变换 实现 的 变形 技术 。 


在 17.5.1 节 中 ,介绍 了 canvas API 中 利用 坐标 变换 实现 的 图 形变 形 技术 ， 当 利用 坐标 变换 不 能 满 


在 介绍 矩阵 变换 之 前 ， 首 先 要 介绍 一 下 变换 矩阵 ， 这 个 矩阵 是 专门 用 来 实现 图 形变 形 的 ， 它 与 坐标 一 


起 配合 使 用 ， 以 达到 变形 的 目的 。 当 图 形 上 下 文 被 创建 完毕 时 ， 事 实 上 也 创建 了 一 个 默认 的 变换 矩阵 ， 如 
果 不 对 这 个 变换 矩阵 进行 修改 ， 那 么 接 下 来 绘制 的 图 形 将 以 画布 的 最 左上 角 的 坐标 原点 绘制 图 形 ， 绘 制 出 
来 的 图 形 也 经 过 缩放 、 变 形 的 处 理 ， 但 是 如 果 对 这 个 变换 矩阵 进行 修改 ， 那 么 情况 将 会 是 不 一 样 的 。 


使 用 图 形 上 下 文 对 象 的 transform 方法 修改 变换 矩阵 ， 该 方法 的 定义 如 下 所 示 。 
transform(m11, m12, m21, m22, dx, dy) 
该 方法 使 用 一 个 新 的 变换 矩阵 与 当前 变换 矩阵 进行 乘法 运算 ， 该 变换 矩阵 的 形式 如 下 所 示 。 


m11 m21 dx 
m12 m22 dy 
0 0 1 


其 中 mll、m21、m12、m22 四 个 参数 用 来 修改 使 用 这 个 方法 之 后 绘制 图 形 时 的 计算 方法 ， 以 达到 


变形 目的 ，dx 与 dy 参数 移动 坐标 原点 ，dx 表示 将 坐标 原点 在 x 轴 上 向 右 移动 x 个 单位 ，dy 表示 将 坐 
标 原点 在 y 轴 上 向 下 移动 y 个 单位 。 默 认 情 况 下 以 像素 为 单位 。 


想 要 了 解 m11、m21、m12、m22 四 个 参数 是 如 何 修改 变形 矩阵 以 达到 变形 目的 的 ， 就 需要 掌握 矩 


阵 乘法 的 有 关 知 识 ， 由 于 篇 幅 有 限 ， 本 书 不 具体 讲述 关于 矩阵 乘法 的 有 关 知 识 ， 下 面 将 通过 几 个 实例 
来 介绍 一 下 矩形 变 阵 的 工作 原理 。 


首先 , 17.5.1 节 使 用 坐标 变换 进行 图 像 变形 的 技术 中 所 提 到 的 3 种 方法 , 实际 上 都 是 隐 式 地 修改 了 


变换 矩阵 ， 可 以 使 用 transform 方法 来 进行 代替 。 


回 translate(x,y) 
可 以 使 用 context.transform(1,0,0,1,x,y) 或 context.transform(0,1,1,0,x,y) 方 法 进行 代 蔡 ,前面 4 个 参数 


(1,0,0,1,x,y 或 者 0,1,1,0,x,y) 表 示 不 对 图 形 进 行 缩放 操作 ， 将 dx 设 为 x 表示 将 坐标 原点 向 右 移动 x 个 单 


位 ， 


dy 设 为 y 表示 将 坐标 原点 向 下 移动 y 个 单位 。 
回 scale(x,y) 
可 以 使 用 context.transform(x,0,0,y,0,0) 或 context.transform(0,y,x,0,0,0) 方 法 进行 代替 , 前面 4 个 参数 


(x,0,0,y,0,0 或 0,y,x,0,0,0) 表 示 将 图 形 横向 扩大 x 倍 ， 纵 向 扩大 y 倍 ，dx、dy 为 0 表示 不 移动 坐标 原点 。 
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名 rotate(x,y) 
替换 方法 如 下 所 示 。 


context.transform(Math.cos(angle*Math.PIl/180), 
Math.sin(angle*Math.Pl/180), 
-Math.sin(angle*Math.PIl/180), 
Math.cos(angle*Math.Pl/180),0,0); 


或 者 
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context.transform(-Math.sin(angle*Math.Pl/180), 
Math.cos(angle*Math.PI/180), 
Math.cos(angle*Math.PIl/180), 
Math.sin(angle*Math.PU180),0,0); 


其 中 前 面 4 个 参数 以 三 角 函 数 的 形式 结合 起 来 , 共同 完成 图 形 按 angle 角度 的 顺 时 针 旋 转 处 理 , dx、 
dy 为 0 表示 不 移动 坐标 原点 。 
例 17.16 下面 通过 实例 来 看 一 下 transform 方法 的 工作 原理 。 在 该 实例 中 ， 用 循环 的 方法 绘制 了 
几 个 圆 弧 ， 圆 弧 的 大 小 与 位 置 均 不 变 ， 只 是 使 用 了 transform 方法 让 坐标 原点 每 次 向 下 移动 10 个 像素 ， 
使 得 绘制 出 来 的 圆 弧 相互 重 营 ， 然 后 对 圆 弧 设置 七 彩 颜色 ， 使 这 些 圆 弧 的 外 观 达到 彩虹 的 效果 。〔 实 
例 位置 ， 光盘 \TMINsINI7\16) 
其 实现 的 主要 代码 如 下 所 示 。 


function draw(id) 


var canvas = document.getElementByld(id); 

var context = canvas.getContext('2d ); 

/定义 颜色 

var colors = ["red", "orange", "yellow", "green", "blue", "navy"，"purple"]; 
"定义 线 宽 */ 

context.lineWidth = 10; 

context.transform(1, 0, 0, 1, 100,0) 

循环 绘制 圆 弧 */ 

for( var i=0; i<colors.length; i++ ) 


/定义 每 次 向 下 移动 10 个 像素 的 变换 矩阵 
context.transform(1, 0, 0, 1, 0, 10); 
让 设 定 颜色 */ 
context.strokeStyle = colors[i]; 
人 * 绘 制 圆 弧 */ 
context.beginPath(); 
context.arc(50, 100, 100, 0, Math.Pl, true); 
context.stroke(); 
1 
} 


运行 效果 如 图 17.18 所 示 。 


图 17.18 ”transform 方法 实现 的 彩虹 
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使 用 transform 方法 后 , 接 下 来 要 绘制 的 图 形 都 会 按照 移动 后 的 坐标 原点 与 新 的 变换 矩阵 相 结合 的 方法 


进行 重 置 ， 必 要 时 可 以 使 用 setTransform 方法 将 变换 矩形 进行 重 置 ，setTransform 方法 定义 如 下 所 示 。 


context.setTransform(m11, m12, m21, m22, dx, dy); 


setTransform 方法 的 参数 及 


左上 角 重 置 为 坐标 原点 ， 当 图 形 上 下 文 创建 完毕 时 将 所 创建 的 初始 变换 矩阵 设置 为 当前 


后 使 用 transform 方法 。 
例 17.17 下 面 通过 实例 来 


参数 的 用 法 与 transform 相同 ， 事 实 上 ， 该 方法 的 作用 为 将 画 


了 解 一 下 setTransform 的 具体 的 使 用 方法 。 在 该 实例 中 首先 创 


布 上 的 最 


变换 矩阵 ， 然 


建 一 个 红 


色 边 框 的 长 方形 , 然后 将 该 长 方形 顺 时 针 旋 转 45”, 绘制 出 一 个 新 的 长 方形 , 并 且 绘 制 其 边框 为 绿色 ， 


然后 将 红色 长 方形 扩大 2.5 倍 绘 


剖 新 的 长 方形 , 边框 为 蓝 色 , 最 后 在 红色 长 方形 右 下 方 绘制 同 


长 方形 ， 边 框 为 灰色 。 本 实例 的 运行 效果 如 图 17.19 所 示 。 (实例 位 置 ， 光盘 \TMNsINI7\17) 


(MB opers 
目 setTransform 方 法 的 .….. x ,Gn 
和 中 癌 9- 加 本 地 localhosty/D:/ 用 


Ni 


图 17.19 ”使 用 setTransform 方法 绘制 变形 图 形 
其 实现 的 主要 代码 如 下 所 示 。 


function draw(id) 


{ 


var canvas = document.getElementByld(id); 
var context = canvas.getContext('2d'); 
/一 一 -一 一 -绘制 红色 长 方形 -------- */ 


context.strokeStyle = "red"”; 
context.strokeRect(30, 10, 
记 一- 绘制 顺 时 针 旋转 45” 


60, 20); 


后 的 蓝 色 长 方形 ------ */ 


var rad = 45 * Math.Pl / 180; /绘制 45” 圆 弧 
context.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), 


Math.cos(rad), 0, 0 ); 
广 一 -------- 绘 制图 形 一 - */ 


// 定 义 顺 时 针 旋 转 45” 的 变换 矩阵 


context.strokeStyle = "blue"; 


context.strokeRect(30, 10, 
六 一 -一 绘制 放大 2.5 倍 后 的 


60, 20); 


绿色 长 方形 a 


context.setTransform(2.5, 0, 0, 2.5, 0, 0); /定义 放大 2.5 倍 的 变换 矩阵 
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* 绘制 图 形 */ 

context.strokeStyle = "green"; 

context.strokeRect(30, 10, 60, 20); 

上 将 坐标 原点 向 右 移 动 40 像素 ， 向 下 移动 80 像素 后 绘制 灰色 长 方形 */ 

context.setTransform(1, 0, 0, 1, 40, 80); /定义 将 坐标 原点 向 右 移动 40 像素 ， 向 下 移动 80 像素 的 矩阵 
六 绘制 图 形 */ 

context.strokeStyle = "gray"; 

context.strokeRect(30, 10, 60, 20); 


17.6 ”组 合 多 个 图 形 


在 前 面 的 实例 中 ， 我 们 看 到 使 用 canvas API 可 以 将 一 个 图 形 重 麦 绘制 在 另 一 个 图 形 上 面 ， 但 图 形 中 能 
够 被 看 到 的 部 分 完全 取决 于 以 哪 种 方式 进行 组 合 ， 这 时 ， 需 要 使 用 到 canvas API 的 图 形 组 合 技术 。 

在 HTML 5 中 ， 只 要 用 图 形 上 下 文 对 象 的 globalCompositeOperation 属性 就 能 决定 图 形 的 组 合 方式 
了 ， 使 用 方法 如 下 所 示 。 

context. globalCompositeOperation = type 


type 的 值 必须 是 下 面 几 种 字符 串 之 一 。 

下 面 将 以 图 形 组 合 的 方式 ， 来 说 明 type 值 的 字符 串 表 现形 式 。 

在 下 面 的 图 形 中 ， 黑 色 方块 是 先 绘制 的 ， 即 “已 有 的 canvas 内 容 ”， 灰 色 圆 形 是 后 绘制 的 ， 即 “新 
图 形 ”。 

source-Over 

这 是 默认 设置 ， 表 示 新 图 形 会 覆盖 在 原 有 图 形 之 上 。 效 果 如 图 17.20 所 示 。 

destination-over 

表示 会 在 原 有 图 形 之 下 绘制 新 图 形 。 效 果 如 图 17.21 所 示 。 

加 source-in 


新 图 形 会 仅仅 出 现 与 原 有 图 形 重 登 的 部 分 ， 其 他 区 域 都 变 成 透明 的 。 效 果 如 图 17.22 所 示 。 
Fr- 一 一 一 


图 17.20 ”source-over 效果 图 17.21 destination-over 效果 图 17.22 ”source-in 效果 
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回 destination-in 

原 有 图 形 中 与 新 图 形 重叠 的 部 分 会 被 保留 ， 其 他 区 域 都 变 成 透明 的 。 效 果 如 图 17.23 所 示 。 
加 source-out 
结果 是 只 有 新 图 形 中 与 原 有 内 容 不 重合 的 部 分 会 被 绘制 出 来 。 效 果 如 图 17.24 所 示 。 
destination-out 


原 有 图 形 中 与 新 图 形 不 重合 的 部 分 会 被 保留 。 效 果 如 图 17.25 所 示 。 
| 
图 17.23 ”destination-in 效果 图 17.24 ”source-out 效果 图 17.25 destination-out 效果 


加 source-atop 

只 绘制 新 图 形 中 与 原 有 图 形 重 共 的 部 分 与 未 被 重 有 覆盖 的 原 有 图 形 , 新 图 形 的 其 他 部 分 变 成 透明 。 
效果 如 图 17.26 所 示 。 

回 destination-atop 

只 绘制 原 有 图 形 中 被 新 图 形 重 共 覆盖 的 部 分 与 新 图 形 的 其 他 部 分 ， 原 有 图 形 中 的 其 他 部 分 变 成 透 
明 ， 不 绘制 新 图 形 中 与 原 有 图 形 相 重合 的 部 分 。 效 果 如 图 17.27 所 示 。 

名 lighter 

两 图 形 中 重 又 部 分 做 加 色 处 理 。 效 果 如 图 17.28 所 示 。 


17.26 source-atop 效果 图 17.27 destination-atop 效果 图 17.28 lighter 效果 


1 


darker 

两 图 形 中 重 肥 的 部 分 作 减 色 处 理 。 效 果 如 图 17.29 所 示 。 

XOT 

重生 的 部 分 会 变 成 透明 。 效 果 如 图 17.30 所 示 。 

回 copy 

只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 。 效 果 如 图 17.31 所 示 。 
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图 17.29 darker 效果 图 17.30 ”xor 效果 图 17.31 copy 效果 


17.7 给 图 形 绘制 阴影 


在 HTML 5 中 ， 使 用 canvas 元 素 可 以 给 图 形 添加 阴影 效果 。 添 加 阴影 效果 时 ， 只 需 利 用 图 形 上 下 
文 对 象 的 几 个 关于 阴影 绘制 的 属性 就 可 以 了 ， 这 几 个 属性 如 下 所 示 。 

加 ”shadowOffsetX 一 一 阴影 的 横向 位 移 量 。 

加 ”shadowOffsetY 一 一 阴影 的 纵向 位 移 量 。 

回 ”shadowBlur 一 一 阴影 的 模糊 范围 。 

回 shadowColor 一 一 阴影 的 颜色 。 

shadowOffsetX 和 shadowOffsetY 用 于 设 定 阴影 在 x 和 y 轴 的 延伸 距离 ， 它 们 是 不 受 变换 矩阵 影 
响 的 。 负 值 表 示 阴 影 会 向 上 或 向 左 延 伸 ， 正 值 则 表示 会 向 下 或 向 右 延 伸 ， 它 们 的 默认 值 都 是 0。 

shadowBlur 用 于 设 定 阴影 的 模糊 程度 ， 表 示 图 形 阴影 边缘 的 模糊 范围 。 如 果 不 希望 阴影 的 边缘 太 
清晰 ， 需 要 将 阴影 的 边缘 模糊 化 时 可 以 使 用 该 属性 。 设 定 该 属性 值 时 必须 设 定 为 比 0 大 的 数字 ， 否 则 
将 被 忽略 。 一 般 设 定 在 0 到 10 之 间 ， 开 发 时 可 以 根据 情况 调整 这 个 数值 ， 以 达到 满意 效果 。 

shadowColor 用 于 设 定 阴影 效果 的 延伸 ， 值 可 以 是 标准 的 CSS 颜色 值 ， 默 认 是 全 透明 的 黑色 。 

例 17.18 下 面 这 个 实例 绘制 了 带 阴影 效果 的 文字 。 本 实例 的 效果 如 图 17.32 所 示 。 《实例 位 置 ; 
光盘 \TMIsINI7\18) 


17.32 ”给 文字 绘制 阴影 的 效果 
本 例 实 现 的 主要 代码 如 下 所 示 。 


function draw(id) { 
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var context = document.getElementByld(‘canvas').getContext('2d"); 
context.shadowOffsetX = 2; 
context.shadowOffsetY = 2; 
context.shadowBlur = 2; 
context.shadowColor = "rgba(0, 0, 0, 0.5)"; 


context.font = "20px Times New Roman"; 
context.fillStyle = "Black"; 
context.fillText("mingrisoft", 5, 30); 


17.8 应 用 图 像 
区 教学 录像 : 光盘 \TMNI1I7\ 应 用 图 像 .exe 


17.8.1 绘制 图 像 


在 HTML 5 中 ， 不 仅 可 以 使 用 canvas API 来 绘制 图 形 ， 还 可 以 读 取 磁盘 或 网 络 中 的 图 像 文 件 ， 然 
后 使 用 canvas API 将 图 像 绘制 在 画布 中 。 

绘制 图 像 时 ， 需 要 使 用 drawImage 方法 ， 该 方法 的 定义 如 下 所 示 。 

drawlmage(image, x, y) 

drawlmage(image, x, y, width, height) 

drawlmage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 
第 一 种 方法 只 使 用 3 个 参数 ， 第 一 个 参数 可 以 是 一 个 img 元 素 、 一 个 video 元 素 ， 或 者 是 一 个 
JavaScript 中 的 image 对 象 ， 使 用 该 参数 代表 的 实际 对 象 来 装载 图 像 文件 。x 与 y 为 绘制 时 该 图 像 在 画 
布 中 的 起 始 坐 标 。 

第 二 种 方法 中 前 3 个 参数 的 使 用 方法 与 第 一 种 方法 一 样 ，width、height 是 指 绘制 时 的 图 像 的 宽度 
与 高 度 。 使 用 第 一 种 方法 绘制 出 来 的 图 像 与 原 图 大 小 相同 ， 而 使 用 第 二 种 方法 可 以 对 缩放 图 像 进行 。 

第 三 种 方法 可 以 用 来 将 画布 中 已 绘制 的 图 像 的 全 部 或 者 局 部 区 域 复制 到 画布 中 的 另 一 个 位 置 上 。 
该 方法 使 用 9 个 参数 ，image 仍然 代表 被 复制 的 图 像 文件 ，sx 与 sy 分 别 表示 源 图 像 的 被 复制 区 域 在 画 
布 中 的 起 始 横 坐 标 与 起 始 纵 坐标 ，sWidth 与 sHeight 表示 被 复制 区 域 的 宽度 与 高 度 ，dx 与 dy 表示 复制 
后 的 目标 图 像 在 画布 中 的 起 始 横 坐 标 与 起 始 纵 坐 标 ，dWidth 与 dHeight 表示 复制 后 的 目标 图 像 的 宽度 
与 高 度 。 该 方法 可 以 只 复制 图 像 的 局 部 ， 只 要 将 sx 与 sy 设 为 局 部 区 域 的 起 始点 坐标 ， 将 sWidth 与 
sHeight 设 为 局 部 区 域 的 宽度 与 高 度 就 可 以 了 。 该 方法 也 可 以 用 来 对 源 图 像 进行 缩放 ， 只 要 将 dWidth 
与 dHeight 设 为 缩放 后 的 宽度 与 高 度 就 可 以 了 。 

绘制 图 像 时 首先 使 用 不 带 参数 的 new 方法 创建 image 对 象 , 然后 设 定 该 image 对 象 的 src 属性 为 需 
要 绘制 的 图 像 文 件 的 路 径 。 具 体 代码 如 下 所 示 。 
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image=new Image(); 
image.src="image.jpg"; // 设 置 图 像 路 径 


然后 就 可 以 使 用 drawImage 方法 绘制 该 图 像 文件 了 。 


事实 上 ， 即 使 设 定好 image 对 象 的 src 属性 ， 也 不 一 定 立刻 就 能 把 图 像 绘制 完毕 ， 例 如 有 时 该 图 像 
文件 是 一 个 来 源 于 网 络 的 比较 大 的 图 像 文 件 ， 这 时 用 户 就 要 有 足够 的 耐心 等 待 图 像 全 部 装载 完毕 才能 


看 见 该 图 像 。 
这 种 情况 下 ， 只 要 使 用 如 下 所 示 的 方法 ， 就 可 以 解决 这 个 问题 了 。 
image.onload=function(){ 绘 制图 像 的 函数 } 


在 image 对 象 的 onload 事件 中 同步 执行 绘制 图 像 的 函数 ， 就 可 以 一 边 装载 一 边 绘制 了 。 


例 17.19 下 面 通过 实例 来 具体 看 一 下 如 何 应 用 上 述 方法 装载 并 绘制 


图 像 .在 本 例 中 使 用 与 页 面 同 


一 个 目录 中 的 图 像 文件 imagemr.jpg 进行 装载 ， 在 一 个 循环 中 将 同一 图 像 文件 绘制 在 画布 的 不 同位 置 


上 。 本 实例 的 运行 效果 如 图 17.33 所 示 。《〔 实 例 位 置 ， 光盘 \TMNsN17\19) 


图 17.33 在 画布 的 不 同位 置 装载 图 像 
在 实现 本 例 的 代码 中 ， 首 先 使 用 new Image 创建 Image 对 象 ， 然 后 指定 该 Image 对 象 的 图 像 文 件 


路 径 ， 再 使 用 onload 方法 装载 图 像 ， 在 装载 的 同时 进行 绘制 。 其 实现 的 主要 代码 如 下 所 示 。 


function draw(id) 


var canvas = document.getElementByld(id); 
var context = canvas.getContext('2d ); 
context.fillStyle = "red"; 

context.fillRect(0, 0, 400, 300); 

image = new Image(); 

image.src = "imagemr.jpg"; 

image.onload = function() 


{ 
» 


drawlmg(context,image); 
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function drawlmg(context,image) 


for(vari = 0;i < 7;i++) 
context.drawimage(image,0 + i* 50,0 + i* 25,100,100); 


17.8.2 图像 的 局 部 放大 


当 我 们 装载 完 图 像 以 后 ， 想 对 图 像 的 某 一 部 分 进行 局 部 放大 时 ， 可 以 使 用 如 下 方法 实现 。 
drawlmage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 


例 17.20 ”下面 通过 一 个 实例 来 具体 讲解 如 何 实现 图 像 的 局 部 放大 的 。 本 例 中 将 卡通 人 物 的 头 部 放 
大 。 本 实例 的 运行 效果 如 图 17.34 所 示 。 (实例 位 置 : 光盘 \TMIsI\17\20) 


口 使 用 图 片 
«3 | 口 加 filey/pym 


图 17.34 图像 的 局 部 放大 效果 
本 例 实 现 的 主要 代码 如 下 所 示 。 


function draw(id) 

{ 
var canvas = document.getElementByld(id); 
if (canvas == null) 

return false; 

var context = canvas.getContext('2d'); 
context.fillStyle = "red"; 
context.fillRect(0, 0, 400, 300); 
image = new Image!(); 
image.src = "imagemr.jpg"; 
image.onload = function() 
{ 


drawlmg(context,image); 
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上 
function drawlmg(context,image) 
{ 
var i=0; 
// 首 先 调用 该 方法 绘制 原始 图 像 


context.drawlmage(image,0,0,100,100); 
/绘制 将 局 部 区 域 进行 放大 后 的 图 像 
context.drawlmage(image,23,5,57,90,110,0,100,100); 


17.8.3 ”图像 平 铺 


在 讲 到 绘制 图 像 的 时 候 ， 有 一 个 非常 重要 的 功能 ， 就 是 图 像 平 铺 技术 ， 即 用 按 一 定 比 例 缩小 后 的 
图 像 将 画布 填 满 。 有 两 种 方法 可 以 实现 该 技术 : 一 种 是 使 用 前 面 所 介绍 的 drawImage 方法 ， 另 一 种 是 
使 用 图 形 上 下 文 对 象 的 createPattern 方法 ， 该 方法 定义 如 下 所 示 。 

context.createPattern(image,type); 

该 方法 使 用 两 个 参数 ，image 参数 为 要 平 铺 的 图 像 ，type 参数 的 值 必须 是 下 面 的 字符 串 之 一 。 

no-repeat: 不 平 铺 。 

repeat-x: 横 方向 平 铺 。 

repeat-y: 纵 方向 平 铺 。 

repeat: 全 方向 平 铺 。 

例 17.21 下 面 以 相同 的 实例 分 别 用 两 种 不 同 的 方法 来 实现 图 像 的 平 铺 , 以 此 来 看 一 下 两 种 方法 的 
不 同 之 处 。〔 实 例 位 置 ， 光盘 \TMIsN17\21) 

先 来 看 一 下 使 用 drawImage 方法 实现 的 图 像 平 铺 的 主要 代码 如 下 所 示 。 


function draw(id) 


{ 


var image = new Image(); 
var canvas = document.getElementByld(id); 
var context = canvas.getContext('2d'); 
image.src = "imagemr.jpg"; 
image.onload = function() 
drawlmg(canvas,contextimage); 

}» 

} 

function drawlmg(canvas,contextimage) 


// 平 铺 比例 


var scale=1 


/| 缩小 后 图 像 宽度 
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var n1=image.width/scale; 
/缩小 后 图 像 高 度 
var n2=image.height/scale; 
// 平 铺 横向 个 数 
var n3=canvas.width/n1; 
// 平 铺 纵向 个 数 
var n4=canvas.height/n2; 
for(var i=0;i<n3;i++) 
for(var j=0;j<n4;j++) 
context.drawlmage(image,i*n1,j*n2,n1,n2); 


} 

从 上 面 的 代码 中 ， 可 以 看 出 使 用 drawImage 方法 需要 使 用 到 几 个 变量 以 及 循环 处 理 ， 处 理 的 方法 
相对 来 说 复杂 一 些 。 

接 下 来 看 一 下 使 用 图 形 上 下 文 对 象 的 createPattern 方法 ， 实 现 的 图 像 平 铺 的 实例 代码 ， 如 下 所 示 。 


function draw(id) 
{ 


var image = new Image(); 
var canvas = document.getElementByld(id); 
if (canvas == null) 
return false; 
var context = canvas.getContext('2d"); 
image.src = "imagemr.jpg"; 
image.onload = function() 
{ 
// 创 建 填充 样式 ， 全 方向 平 铺 
var ptrn = context.createPattern(image,'repeat'); 
// 指 定 填充 样式 
context.fillStyle = ptrn; 
// 填 充 画 布 
context.fillRect(0,0,400,300); 


} 


从 上 述 代码 中 可 以 看 出 ,使 用 图 形 上 下 文 对 象 的 createPattern 方法 实现 的 图 像 的 平 铺 相 对 来 说 比较 
简单 。 只 需要 简单 的 几 步 就 可 以 轻松 完成 图 像 的 平 铺 ， 实 现 步 又 如 下 。 

首先 ， 创 建 image 对 象 并 指定 图 像 文件 后 ， 使 用 createPattern 方法 创建 填充 样式 。 

其 次 ， 将 该 样式 指定 给 图 形 上 下 文 对 象 的 fillStyle 属性 。 

最 后 ， 填 充 画 布 ， 就 可 以 看 到 重复 填充 的 效果 了 。 

使 用 drawImage 方法 和 使 用 createPattern 方法 实现 本 例 的 运行 效果 是 一 致 的 ， 运 行 效果 如 图 17.35 
所 示 。 
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图 17.35 ”图像 的 平 铺 实例 


17.8.4 图 像 裁剪 


使 用 canvas 绘制 图 像 的 时 候 , 有 时 需要 对 图 像 实现 裁剪 ,前 去 多 余 的 内 容 ,这 时 只 要 使 用 canvas API 
自 带 的 图 像 裁剪 功能 就 可 以 实现 图 像 的 裁剪 。 

canvas API 的 图 像 裁剪 功能 是 指 ， 在 画布 内 使 用 路 径 时 ， 只 绘制 该 路 径 所 包括 区 域内 的 图 像 ， 不 
绘制 路 径 外 部 的 图 像 。 

使 用 图 形 上 下 文 对 象 的 不 带 参数 的 clip 方法 来 实现 canvas 元 素 的 图 像 裁 前 功能 。 该 方法 使 用 路 径 
来 对 canvas 画布 设置 一 个 裁 前 区域。 因此 ， 必 须 先 创建 好 路 径 。 路 径 创 建 完成 后 ， 调 用 clip 方法 设置 
裁 前 区 域 。 

例 17.22 ”本 例 把 画布 背景 绘制 完成 后 ， 调 用 createyuanClip 函数 。 在 函数 中 ， 创 建 一 个 圆 形 的 路 
径 ， 然 后 使 用 clip 方法 设置 裁 前 区 域 。〈 实 例 位 置 : 光盘 \TMNsIN17\22) 

具体 过 程 为 先 装载 图 像 ， 然 后 调用 drawImage 函数 ， 在 该 函数 中 调用 createyuanClip 创建 路 径 ， 设 
置 裁剪 区 域 ， 然 后 绘制 裁剪 后 的 图 像 一 一 最 终 可 以 绘制 出 一 个 圆 形 范 围 内 的 图 像 。 

裁剪 区 域 一 旦 设置 好 ， 后 面 绘制 的 所 有 图 形 就 都 可 以 使 用 这 个 裁剪 区域 ， 如 果 想 要 取消 设置 好 的 
裁 前 区域, 这 就 需要 使 用 到 17.10 节 中 介绍 的 绘制 状态 的 保存 与 恢复 功能 。 这 两 个 功能 保存 与 恢复 图 形 
上 下 文 的 临时 状态 ， 在 设置 图 像 裁剪 区 域 时 ， 首 先 调用 save 方法 保存 图 形 上 下 文 的 当前 状态 ， 在 绘制 
完 经 过 裁剪 的 图 像 后 ， 再 调用 restore 恢复 之 前 保存 的 图 形 上 下 文 的 状态 ， 通 过 这 种 方法 ， 对 之 后 绘制 
的 图 像 取 消 裁 前 区 域 。 本 实例 的 运行 效果 如 图 17.36 所 示 。 


HTML 5 从 入 门 到 精通 


实现 本 例 的 主要 代码 如 下 所 示 。 


function draw(id) 


{ 


var canvas = document.getElementByld(id); 
var context = canvas.getContext('2d"); 
var gr = context.createLinearGradient(0,200,150,0); 
gr.addColorStop(0,rgb(255,255,0)); 
gr.addColorStop(1,rgb(0,255,255)); 
context.fillStyle = gr; 
context.fillRect(0, 0, 200, 200); 
image = new Image(); 
image.onload = function() 
{ 

drawlmg(contextimage); 
}; 


image.src = "imagemr.jpg"; 


function drawlmg(context,image) 


中 


b 


createyuanClip(context); 
context.drawlmage(image,-50,-80,300,300); 


function createyuanClip(context) 


context.beginPath(); 

context.arc( 100, 100, 75, 0, Math.Pl * 2, true); 
context.closePath(); 

context.clip(); 


17.8.5 ”像素 的 处 理 


在 HTML 5 中 使 用 canvas API 所 能 够 做 到 的 图 像 处 理 技术 上 


ph， 还 有 一 个 更 让 人 惊讶 的 技术 就 是 像 


素 处 理 技术 。 使 用 canvas API 能 够 获取 图 像 中 的 每 一 个 像素 , 然后 得 到 该 像素 颜色 的 rgb 值 或 rgba 值 。 
里 图 像 上 下 文 对 象 的 getImageData 方法 来 获取 图 像 中 的 像素 ， 该 方法 的 定义 如 下 所 示 。 


var imagedata = context.getlmageData(Sx,sy,sw,sh); 


使 


该 方法 使 


所 获取 
Im 


4 个 参数 ，sx、sy 分 别 表 示 所 获取 区 域 的 起 点 横 坐标 、 起 点 纵 坐 标 ，sw、sh 分 别 表示 


区 域 的 宽度 和 高 度 。 
agedata 变量 是 一 个 CanvasPixelArray 对 象 ， 具 有 height、width、data 等 属性 。data 属性 是 一 个 


保存 像素 数据 的 数组 ， 内 容 类 似 于 “[rl,gl,bl,al, r2,g2,b2,a2, r3,g3,b3,a3,.….]”, 其 中 ，r1,g1,b1,al 为 第 一 


个 像素 
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的 红色 值 、 绿 色 值 、 蓝 色 值 、 透 明 值 ，r2,g2,b2,a2 分 别 为 第 二 个 像素 的 红色 值 、 绿 色 值 、 蓝 色 
值 、 透 明 值 ， 依 此 类 推 。data.length 为 所 取得 像素 的 数量 。 
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使 用 canvas API 获取 图 像 中 所 有 像素 方法 的 代码 如 下 所 示 。 


var context = canvas.getContext('2d"); 

var image = new Image(); 

image.onload = function() 

{ 

var.imagedata; 

context.drawlmage(image,0,0); 

imagedata = context.getlmageData(0,0,image.width,image.height); 
上 


取得 了 这 些 像素 以 后 ， 就 可 以 对 这 些 像 素 进行 处 理 了 ， 如 可 以 进行 蒙 版 处 理 、 面 部 识别 等 较 复杂 
的 图 像 处 理 操作 。 

例 17.23 ”下面 给 出 一 个 用 canvas API 将 图 像 进 行 反 相 操作 的 示例 .实例 位 置 :光盘 \TMNsI\17\23) 

所 谓 的 反 相 操作 就 是 调整 反 转 图 像 中 的 颜色 。 在 对 图 像 进行 反 相 时 ， 通 道中 每 个 像素 的 亮度 值 都 
会 转换 为 256 级 颜色 值 标 度 上 相反 的 值 。 例 如 ， 原 图 像 中 值 为 255 的 像素 会 被 转换 为 0,， 值 为 5 的 像素 
会 被 转化 为 250。 在 该 实例 中 得 到 像素 数组 后 , 将 该 数组 中 每 个 像素 的 颜色 进行 了 反 相 操作 后 的 图 像 重 
新 绘制 在 画布 上 。 该 方法 的 定义 如 下 所 示 。 

context.putlmageData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth, dirtyHeight]); 


该 方法 使 用 7 个 参数 : imagedata 为 前 面 所 述 的 像素 数组 ; dx、dy 分 别 表示 重 绘图 像 的 起 点 横 坐 标 
和 起 点 纵 坐 标 ，dirtyX、dirtyY、dirtyWidth、dirtyHeight 这 4 个 参数 为 可 选 参数 ， 给 出 一 个 矩形 的 起 点 
横 坐 标 、 起 点 纵 坐 标 、 宽 度 与 高 度 ， 如 果 加 上 这 4 个 参数 ， 则 只 绘制 像素 数组 中 这 个 矩形 范围 内 的 图 
像 。 本 例 的 运行 效果 如 图 17.37 所 示 。 


图 17.37 图 像 的 反 相 效果 
本 例 实现 的 主要 代码 如 下 所 示 。 


function draw(id) 
{ 
var canvas = document.getElementByld(id); 
var context = canvas.getContext('2d"); 
var image = new Image(); 
image.src = "imagemr.jpg"; 
image.onload = function() 
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{ 

context.drawlmage(image,0,0); 

var imagedata = context.getlmageData(0,0,image.width,image.height); 
for(var i =0, n=imagedata.data.length;i<n;i+=4) 

Hl 

imagedata.datali+0]=255-imagedata.data[i+0]; 。 // 红 色 
imagedata.data[i+1]=255-imagedata.data[i+2]; /绿色 
imagedata.datali+2]=255-imagedata.data[li+1]; 。 // 蓝 色 


} 
context.putlmageData(imagedata,0,0); 


}; 


17.9 绘制 文字 


在 HTML 5 中 ， 可 以 在 canvas 画布 中 进行 文字 的 绘制 ， 也 可 以 指定 绘制 文字 的 字体 、 大 小 、 对 齐 
方式 等 ， 还 可 以 进行 文字 的 纹理 填充 等 ， 绘 制 文字 时 可 以 使 用 fillText 方法 或 strokeText 方 法 。 

fillText 方法 用 填充 方式 绘制 字符 串 ， 该 方法 的 定义 如 下 所 示 。 

void fillText(text,x,y[,maxWidth]); 


该 方法 接受 4 个 参数 ， 第 一 个 参数 text 表示 要 绘制 的 文字 ， 第 二 个 参数 x 表示 绘制 文字 的 起 点 横 
坐标 ; 第 三 个 参数 y 表示 绘制 文字 的 起 点 纵 坐标 ; 第 四 个 参数 maxWidth 为 可 选 参数 ,表示 显示 文字 时 
的 最 大 宽度 ， 可 以 防止 文字 溢出 。 

strokeText 方法 用 轮廓 方式 绘制 字符 串 ， 该 方法 的 定义 如 下 所 示 。 

void stroke text(text,x,y[,maxWidth]); 


该 方法 参数 功能 与 fllText 方法 相同 。 

在 使 用 canvas API 来 进行 文字 的 绘制 之 前 ， 先 对 该 对 象 的 有 关 文 字 绘 制 的 属性 进行 设置 ， 主 要 有 
如 下 几 个 属性 。 

font 属性 : 设置 文字 字体 。 

textAlign 属性 : 设置 文字 水 平 对 齐 方式 ， 属 性 值 可 以 为 start、end、left、right、center。 默 认 值 为 
Start 。 

textBaseline 属性 : 设置 文字 垂直 对 齐 方式 ， 属 性 值 可 以 为 top、hanging、middle、alphabetic、 
ideographic、bottom。 默 认 值 为 alphabetic 。 

例 17.24 面 应 用 fillText 方法 和 strokeText 方法 来 绘制 一 句 欢迎 语 ， 通 过 对 比 看 一 下 两 种 方法 
设置 字体 样式 的 区 别 。《〈 实 例 位置 : 光盘 \TMNsIN17\24) 
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实现 的 代码 如 下 所 示 。 


<Script > 
function draw(id) 

var canvas = document.getElementByld(id); 

if (canvas == null) 

return false; 

var context=canvas.getContext('2d"); 

context.fillStyle= #00f; 

context.font= 'italic 30px sans-serif; 

context.textBaseline = 'top'; 

// 填 充 字符 串 

context.fillText(' 明 日 科技 欢迎 你 ', 0, 0); 

context.font='bold 30px sans-serif; 

// 轮 廓 字符 串 

context.strokeText(' 明 日 科技 欢迎 你 ', 0, 50); 
b 
</script> 
本 例 运 行 


运行 的 效果 如 图 17.38 所 示 。 


D @ 


绘制 图 形 


eole Ei 


7 
明日 科技 欢迎 你 


图 17.38 应 用 fillText 方法 和 strokeText 方法 绘制 文字 


17.10 保存 与 恢复 状态 

save 和 restore 方法 是 用 来 保存 和 恢复 canvas 状态 的 ， 都 没有 参数 。 分 别 保存 与 恢复 图 形 上 下 文 的 
当前 绘画 状态 。 这 里 的 绘画 状态 指 前 文 所 讲 的 坐标 原点 、 变 形 时 的 变化 矩阵 ， 以 及 图 形 上 下 文 对 象 的 
当前 属性 值 等 内 容 。 在 需要 保存 与 恢复 当前 状态 时 ， 首 先 调用 save 方法 将 当前 状态 保存 到 栈 中 ， 在 完 
成 设置 的 操作 后 ， 再 调用 restore 从 栈 中 取出 之 前 保存 的 图 形 上 下 文 的 状态 进行 恢复 ， 通 过 这 种 方法 ， 
可 对 之 后 绘制 的 图 像 取消 裁 前 区 域 。 

保存 与 恢复 可 以 应 用 到 以 下 场合 。 

图 像 或 图 形变 形 。 

图 像 裁剪。 
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改变 图 形 上 下 文 的 以 下 属性 时 : strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、 
ImiterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation 。 


17.11 文件 的 保存 


在 画布 上 绘制 完成 一 幅 图 形 或 图 像 后 ， 想 要 对 绘制 的 作品 进行 保存 时 ， 使 用 canvas API 就 可 以 完成 。 
canvas API 保存 文件 的 原理 实际 上 是 把 当前 的 绘画 状态 输出 到 一 个 data URL 地 址 所 指向 的 数据 中 
的 过 程 ， 所谓 data URL， 是 指 目前 大 多 数 浏 览 器 能 够 识别 的 一 种 base64 位 编码 的 URL， 主 要 用 于 小 型 
的 、 可 以 在 网 页 中 直接 嵌入 , 而 不 需要 从 外 部 文件 典 入 的 数据 ， 如 img 元 素 中 的 图 像 文件 等 。data URL 
的 格式 类 似 于 “data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAK...etce”, 它 目前 
得 到 了 大 多 数 浏 览 器 的 支持 。 

canvas API 使 用 toDataURL 方法 把 绘画 状态 输出 到 一 个 dataURL 中 ， 然 后 重新 装载 客户 可 直接 把 
装载 后 的 文件 进行 保存 。 

toDataURL 的 使 用 方法 如 下 所 示 。 

canvas. toDataURL(type); 

该 方法 使 用 一 个 参数 type， 表 示 要 输出 数据 的 MIME 类 型 。 

例 17.25 下 面 是 一 个 使 用 canvas API 将 图 像 输出 到 dataURL 的 实例 。 本 例 的 运行 效果 如 图 17.39 
所 示 。 (实例 位 置 ， 光盘 \TMNsN17\25) 


图 17.39 使 用 canvas API 将 图 像 输 出 到 data URL 的 实例 
K 现 的 代码 如 下 所 示 。 


function draw(id) 


(2 


var canvas = document.getElementByld(id); 

var context = canvas.getContext('2d"); 
context.fillStyle = "rgb(0, 0, 255)"; 

context.fillRect(0, 0, canvas.width, canvas.height); 
context.fillStyle = "rgb(0, 255, 0)"; 
context.fillRect(10, 20, 50, 50); 

window.location =canvas.toDataURL("image/jpeg"); 
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17.12 ”对 画布 绘制 实现 动画 


区 aa 教学 录像 : 光盘 \TMNA17\ 对 画布 绘制 实现 动画 .exe 

由 于 是 用 脚本 操控 canvas 对 象 的 ， 这 样 要 实现 一 些 交互 动画 也 是 相当 容易 的 。 只 不 过 ，canvas 并 不 
是 专门 为 动画 而 设计 的 〈 不 像 Flash) ， 难 免 会 有 些 限 制 。 最 大 的 限制 就 是 图 像 一 旦 绘制 出 来 ， 它 就 是 
一 直 绘 制 完 的 状态 了 ， 如 果 需 要 移动 它 ， 不 得 不 对 所 有 东西 〈 包 括 之 前 的 ) 进行 重 绘 。 

对 画布 绘制 实现 动画 的 步骤 如 下 。 

(1) 预先 编写 好 用 来 绘图 的 函数 ， 在 该 函数 中 先 用 clearRect 方法 将 画布 整体 或 局 部 擦 除 。 

(2) 使 用 setInterval 方法 设置 动画 的 间隔 时 间 。 

setInterval 方法 为 HTML 中 固有 的 方法 ， 该 方法 接受 两 个 参数 ， 第 一 个 参数 表示 执行 动画 的 函数 ， 
第 二 个 参数 为 时 间 间 隔 ， 单 位 为 毫秒 。 

在 比较 复杂 的 情况 下 ,也 可 以 在 清除 与 绘制 动画 当中 插入 当前 绘制 状态 的 保存 与 恢复 ， 变 成 擦 除 、 
保存 绘制 状态 、 进 行 绘制 、 恢 复 状态 的 过 程 。 

例 17.26 下面 根据 上 面 的 步 又 通过 使 用 canvas API 绘制 一 个 简单 的 动画 。 该 实例 中 将 绘制 一 个 
蓝 色 小 方块 ， 使 其 在 画布 中 从 左 向 右 缓慢 移动 。 本 实例 的 运行 效果 如 图 17.40 所 示 。〔 实 例 位 置 ， 光 
盘 \TMIsIN7\26) 


图 17.40 在 画布 上 绘制 的 移动 小 方块 


其 主要 代码 如 下 所 示 。 


var context; 

var width,height'; 
vari; 

function draw(id) 


var canvas = document.getElementByld(id); 
if (canvas == null) 
return false; 
context = canvas.getContext('2d"); 
width=canvas.width; 
height=canvas.height; 
i=0; 
setlnterval(rotate,100); /十 分 之 一 秒 
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function rotate() 


{ 
context.clearRect(0,0,width,height); 
context.fillStyle = "blue"; 
context.fillRect(i, 0, 20, 20); 
i=i+20; 

| 


17.13 ”综合 实例 一 一 桌面 时 钟 


菊 1 教学 录像 : 光盘 \TM\IX\1 作 综合 实例 一 一 桌面 时 钟 .exe 
例 17.27 本 例 将 综合 本 章 所 讲 的 canvas API 知识 制作 一 个 桌面 时 钟 。 在 制作 桌面 时 钟 时 ， 应 用 
了 图 形 的 路 径 、 变 形 以 及 动画 制作 等 。 (实例 位 置 ， 光盘 \TM\sN727) 
具体 操作 步骤 如 下 。 
(1) 在 body 的 属性 中 ， 使 用 了 onload="time('canvas");" 语 句 。 调 用 脚本 文件 中 的 time 函数 进行 图 
形 描画 。 
(2) 使 用 setInterval 方法 设置 动画 的 时 间 间 隔 ， 同 时 调用 clock 方法 ， 执 行动 画 。 代 码 如 下 所 示 。 


function time(){ 


clock(); 
setlnterval(clock,1000); // 调 用 clock 函数 执行 动画 操作 ， 干 分 之 一 秒 
} 
(3) 在 clock 方法 中 ， 首 先 实例 化 时 间 对 象 。 代 码 如 下 所 示 。 
var now = new Date(); /实例 化 对 象 


(4) 用 document.getElementByld 方法 取得 canvas 对 象 。 代 码 如 下 所 示 。 


var context = document.getElementByld('canvas').getContext('2d"); 


(5) 先 对 要 绘制 的 操作 进行 保存 ， 然 后 使 用 clearRect 方法 将 画布 擦 除 。 接 着 通过 变形 操作 ,设置 
表盘 上 用 于 表示 显示 时 间 小 线段 的 样式 。 实 现 的 代码 如 下 所 示 。 


context,save(); /保存 当前 状态 
context.clearRect(0,0,150,150); /| 擦 除 画 布 
context.translate(75,75); // 向 左 ， 向 下 平移 75 个 单位 
context.scale(0.4,0.4); /| 图 形 缩放 0.4 
context,rotate(-Math.PI2); // 逆 时 针 旋转 90 度 
context.strokeStyle = "black"; // 设 置 图 形 边框 的 样式 颜色 为 黑色 
context.fillStyle = "white"; /填充 颜色 为 白色 
context.lineWidth = 8; // 设 置 线 宽 为 8 

context.lineCap = "round"; // 线 段 端 为 默认 的 圆 形 


(6) 通过 for 循环 设置 表示 时 间 段 的 循环 绘制 ， 创 建 绘制 的 路 径 ， 按 照 设 定 的 角度 绘制 表示 小 时 
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时 间 段 的 线段 。 实 现 的 代码 如 下 所 示 。 


context.save(); /保存 当前 状态 

for (var i=0;i<12;i++X{ // 通 过 for 循环 设置 表盘 的 小 时 时 间隔 
context.beginPath(); /创建 设置 小 时 的 路 径 
context.rotate(Math.PI/6); // 顺 时 针 旋 转 30 度 
context.moveTo(100,0); // 将 当前 位 置 移动 到 指定 的 位 置 
context.lineTo(120,0); 
context.stroke(); // 绘 制 时 钟 小 时 的 间隔 

} 


(7) 通过 for 循环 设置 表示 时 间 段 的 循环 绘制 ， 创 建 绘制 的 路 径 ， 按 照 设 定 的 角度 绘制 分 的 时 间 
间隔 线段 。 实 现 的 代码 如 下 所 示 。 


context.save(); 
context.lineWidth = 5; 


for (i=0;i<60;i++}{ // 通 过 for 循环 设置 表盘 的 分 钟 间隔 
if (i%5!=0) { // 通 过 if 语句 判断 结果 ， 如 果 相 除 结果 不 为 0， 则 继续 执行 循环 
context.beginPath(); // 创 建设 置 分 钟 的 路 径 
context.moveTo(117,0); 


context.lineTo(120,0); 
context.stroke(); 


} 
context.rotate(Math.PI/30); // 顺 时 针 旋 转 6 度 
1 
context.restore(); 
(8) 设置 秒 钟 、 分 钟 、 小 时 的 时 间 变 量 ， 同 时 利用 三 元 运算 符 ， 判 断 小 时 数 是 否 大 于 12， 若 大 于 
则 进行 hr-12 的 运算 。 实 现 的 代码 如 下 所 示 。 


var sec = now.getSeconds(); /设置 秒 钟 时 间 变 量 
var min = now.getMinutes(); // 设 置 分 钟 时 间 变 量 
var hr = now.getHours(); /设置 小 时 时 间 变 量 


hr = hr>=12 ? hr-12 : hr; 
(9) 下 面 开 始 绘制 表盘 上 的 指针 ， 首 先 绘制 时 针 的 指针 。 实 现 的 代码 如 下 所 示 。 


context.save(); 

context.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) 
context.lineWidth = 14; 

context.beginPath(); 

context.moveTo(-20,0); 

context.lineTo(80,0); 

context.stroke(); 

context.restore(); 


(10) 绘制 表盘 上 分 针 的 指针 实现 的 代码 如 下 所 示 。 


context.save(); 
context.rotate( (Math.PI30)*min + (Math.PU1800)*sec ) 
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context.lineWidth = 10; 
context.beginPath(); 
context.moveTo(-28,0); 
context.lineTo(112,0); 
context. stroke(); 
context.restore(); 


(11) 绘制 表盘 上 秒针 的 指针 实现 的 代码 如 下 所 示 。 


context.save(); 
context.rotate(sec * Math.PIl/30); 
context.strokeStyle = "#D40000"; 
context.fillStyle = "#D40000"; 
context.lineWidth = 6; 
context.beginPath(); 
context.moveTo(-30,0); 
context.lineTo(83,0); 
context.stroke(); 
context.restore(); 


(12) 当 表 盘 的 时 间 段 和 指针 绘制 完成 以 后 ， 最 后 在 表盘 的 外 面 绘制 一 个 圆 形 的 边框 。 实 现 的 代 
码 如 下 所 示 。 


context.beginPath(); 
context.lineWidth = 14; 
context.strokeStyle = #325FA2'; 
context.arc(0,0,142,0,Math.Pl*2,true); 
context.stroke(); 

context.restore(); 


本 实例 的 运行 效果 如 图 17.41 所 示 。 


图 17.41 桌面 时 钟 


17.14 小 结 


本 章 重 点 讲解 了 HTML 5 新 增 的 画布 一 一 canvas 功能 以 及 伴随 这 个 元 素 而 来 的 一 套 编程 接口 一 一 
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canvas API， 以 及 如 何 使 用 canvas API 绘制 各 种 图 形 , 并 在 讲解 实例 的 同时 对 绘制 中 应 用 到 的 各 种 属性 
进行 了 详细 的 阐述 。 在 讲解 完 绘制 图 形 以 后 ， 继 续 讲 解 了 如 何在 画布 中 使 用 图 像 。 希 望 读者 能 了 解 并 
熟练 掌握 HTML 5 新 增 的 canvas 元 素 ， 以 此 来 制作 出 更 加 丰富 多 彩 、 赏 心 悦 目 的 Web 页 面 。 


17.15 习 题 

选择 题 
1. 下 面 用 于 设 定 填充 图 形 的 样式 的 是 (  )。 

A. fillStyles B. strokeStyle C. fillStyle D. 以 上 都 是 
2. 下 面 用 于 设 定 图 形 边框 的 样式 的 是 (  )。 

A. fillStyle B. strokeStyle C. header D. 以 上 都 是 
3. 下 面 的 颜色 值 表示 错误 的 是 (  ) 。 

A. red B. rgb C. #EEEEFF D. rcbg 
4. 开始 创建 路 径 的 方法 是 (  )。 

A. act B. head C. beginPath D. command 
5. 下 面 的 代码 中 ， 表 示 绘 制 的 是 一 个 顺 时 针 的 圆 的 是 (  )。 


. context.arc(100, 100, 75, 0, Math.PI * 2, false); 
. context.arc(100, 100, 75, 0, Math.PI * 2, true); 
. Context.fillStyle = 'rgba(255, 0, 0, 0.25)'; 
D. 以 上 都 不 正确 
判断 题 
6. contextrotate(Math.PI10) 表 示 的 是 旋转 180 度 。 ( ) 
7.source-in 表示 的 是 会 在 原 有 图 形 之 下 绘制 新 图 形 。 ( ) 
填空 题 


8. 绘制 图 形 应 用 的 方法 是 和 
9. Math.PI*2 表示 角度 为 度 。 
10. 使 可 以 绘制 贝 塞 尔 曲线 。 


品 双关 
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( 如 教学 录像 ，50 分 钟 ) 


本 章 介 绍 HTML 5 中 与 本 地 存储 相关 的 两 个 重要 内 容 一 一 Web Storage 与 本 地 
数据 库 。 其 中 ，Web Storage 存储 机 制 是 对 HTML4 中 cookies 存储 机 制 的 一 个 改 
善 。 由 于 cookies 存储 机 制 有 很 多 缺点 ，HTML 5 中 不 再 使 用 它 ， 转 而 使 用 改良 后 
的 Web Storage 存储 机 制 。 本 地 数据 库 是 HTML 5 中 新 增 的 一 个 功能 , 使 用 它 可 以 
在 客户 端 建立 一 个 数据 库 一 原本 必须 保存 在 服务 器 端 数据 库 中 的 内 容 可 以 直接 
保存 在 客户 端 了 ， 大 大 减轻 了 服务 器 端的 负担 ， 同 时 也 加 快 了 访问 数据 的 速度 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 

MH ”掌握 Web Storage 的 基本 概念 

忆 了 解 sessionStorage 和 localStorage， 以 及 两 者 之 间 的 区 别 

”掌握 sessionStorage 和 localStorage 的 使 用 方法 

避 ” 掌 握 使 用 sessionStorage 和 localStorage 进行 复杂 数据 的 存储 

书 ”使 用 sessionStorage 和 localStorage 进行 JavaScript 对 象 的 存储 

由 ”掌握 本 地 数据 库 的 基本 概念 以 及 使 用 openDatabase 方法 创建 与 打开 数据 库 

| 能够 使 用 transaction 方法 进行 事务 的 处 理 
是 


结合 transaction 方法 与 executeSq| 方法 实现 数据 在 本 地 数据 库 中 的 增加 .删除 、 
查询 和 修改 
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18.1 初 识 Web Storage 


区 教学 录像 : 光盘 \TMN\Ix\18\ 初 识 Web Storage.exe 
18.1.1 什么 是 Web Storage 


在 HTML 5 中 ， 除 了 canvas 元 素 之 外 ， 另 一 个 新 增 的 非常 重要 的 功能 是 可 以 在 客户 端 本 地 保存 数 
据 的 Web Storage 功能 。Web 应 用 的 发 展 ， 使 得 客户 端 存储 使 用 得 也 越 来 越 多 ， 而 实现 客户 端 存储 的 
方式 则 是 多 种 多 样 。 最 简单 而 且 兼 容 性 最 佳 的 方案 是 cookies， 但 是 作为 真正 的 客户 端 存储 ，cookies 
还 存在 一 些 不 足 。 

加 ”大 小 : cookies 的 大 小 被 限制 在 4KB。 

加 ”带宽 : cookies 是 随 HTTP 事务 一 起 发 送 的 ， 因 此 会 浪费 一 部 分 发 送 cookies 时 使 用 的 带宽 。 

加 ”复杂 : cookies 操作 起 来 比较 麻烦 : 所 有 的 信息 要 被 拼 到 一 个 长 字符 串 里 面 。 

回 ”联系 对 cookies 来 说 ， 在 相同 的 站 点 与 多 事务 处 理 保持 联系 不 是 很 容易 。 

在 这 种 情况 下 , 在 HTML 5 中 重新 提供 了 一 种 在 客户 端 本 地 保存 数据 的 功能 ， 它 就 是 Web Storage 
功能 。 

顾名思义 ，Web Storage 功能 就 是 在 Web 上 存储 数据 的 功能 ， 而 这 里 的 存储 ， 是 针对 客户 端 本 地 
而 言 的 。 它 包含 两 种 存储 类 型 .sessionStorage 和 localStorage 二 者 都 支持 在 同 域 下 存储 5MB 数据 ， 与 
cookies 相 比 有 着 明显 的 优势 。 

sessionStorage 

将 数据 保存 在 session 对 象 中 。 所 谓 session， 是 指 用 户 在 浏览 某 个 网 站 时 ， 从 进入 网 站 到 浏览 器 关 
闭 所 经 过 的 这 段 时 间 ， 即 浏览 这 个 网 站 所 花费 的 时 间 。session 对 象 可 以 用 来 保存 在 这 段 时 间 内 所 要 保 
存 的 任何 数据 。 

localStorage 

将 数据 保存 在 客户 端 本 地 的 硬件 设备 中 ， 即 使 关闭 了 浏览 器 ， 该 数据 仍然 存在 ， 下 次 打开 浏览 器 
访问 网 站 时 仍然 可 以 继续 使 用 。 

这 两 种 不 同 的 存储 类 型 区 别 在 于 ，sessionStorage 为 临时 保存 ， 而 localStorage 为 永久 保存 。 


18.1.2 ”使 用 Web Storage 中 的 API 


下 面 讲解 如 何 使 用 Web Storage 的 API。 目 前 Web Storage 的 API 如 下 所 示 。 

加 ”Length: 获得 当前 Web Storage 中 的 数目 。 

回 key(n): 返回 Web Storage 中 的 第 n 个 存储 条 目 。 

getItem(key): 返回 指定 key 的 存储 内 容 ， 如 果 不 存在 则 返回 null。 注 意 ， 返 回 的 类 型 是 字符 
串 类 型 。 
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setItem(key, value): 设置 指定 key 的 内 容 的 值 为 value。 

removeltem(key): 根据 指定 的 key， 删 除 键 值 为 key 的 内 容 。 

clear: 清空 Web Storage 的 内 容 。 
[以 看 到 ，Web Storage API 的 操作 机 制 实际 上 是 对 键 值 对 进行 的 操作 。 下 面 是 一 些 相关 的 应 
.数据 的 存储 与 获取 
在 localStorage 中 设置 键 值 对 数据 可 以 应 用 setItem()， 代 码 如 下 所 示 。 
localStorage.setltem("key", "value"); 
获取 数据 可 以 应 用 getttem0， 代 码 如 下 所 示 。 
var val = localStorage.getltem("key"); 


当然 也 可 以 直接 使 用 localStorage 的 key 方法 ， 而 不 使 用 setItem 和 getltem 方法 ， 代 码 如 下 所 示 。 


localStorage.key = "value"; 
var val = localStorage.key; 


HTML 5 存储 是 基于 键 / 值 对 (key/value〉 的 形式 存储 的 ， 每 个 键 / 值 对 称 为 一 个 项 (item) 。 

存储 和 检索 数据 都 是 通过 指定 的 键 名 来 进行 的 ， 键 名 的 类 型 是 字符 串 类 型 。 值 可 以 是 包括 字符 串 、 
布尔 值 、 整 数 或 者 浮 点 数 在 内 的 任意 JavaScript 支持 的 类 型 。 但 是 ， 最 终 数 据 是 以 字符 串 类 型 存储 的 。 

调用 结果 是 将 字符 串 value 设置 到 sessionStorage 中 ， 这 些 数据 随后 可 以 通过 键 key 获取 。 调 用 
setftemO 时 ; 如 果 指 定 的 键 名 已 经 存在 ， 新 传 入 的 数据 就 会 覆盖 原先 的 数据 ; 调用 getItem() 时 ， 如 果 传 
入 的 键 名 不 存在 ， 则 会 返回 null， 而 不 会 抛 出 异常 。 

2. 数据 的 删除 和 清空 

removelItem() 用 于 从 Storage 列表 删除 数据 ， 代 码 如 下 所 示 。 

var val = sessionStorage.removeltem(key); 

也 可 以 通过 传 入 数据 项 的 key 从 而 删除 对 应 的 存储 数据 ， 代 码 如 下 所 示 。 


var val = sessionStorage.removeltem(1); 


相 网 网 风 


/. 
egw yr string， 因 为 key 的 类 型 就 是 字符 囊 . 


clear() 方 法 用 于 清空 整个 列表 的 所 有 数据 ， 代 码 如 下 所 示 。 
SessionStorage.clear(); 
同时 可 以 通过 使 用 length 属性 获取 Storage 中 存储 的 键 / 值 对 的 个 数 。 


var val = sessionStorage.length; 


全 注意 removelItem 可 以 清除 给 定 的 key 所 对 应 的 项 ， 如 果 key 不 存在 则 “什么 都 不 做 ”; clear 
会 清除 所 有 的 项 ， 如 果 列 表 本 来 就 是 空 的 就 “什么 都 不 做 ”。 
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18.1.3 sessionStorage 和 localStorage 的 实例 一 一 计数 器 


例 18.1 下 面 通过 一 个 实例 来 具体 看 一 下 sessionStorage 和 localStorage 的 区 别 。 本 例 主要 是 通过 
sessionStorage 和 localStorage 对 页 面 的 访问 量 进行 计数 。 当 在 文本 框 内 输入 数据 后 ， 分 别 可 以 单 击 
“session 保存 ”按钮 和 “local 保存 ”按钮 对 数据 进行 保存 ， 还 可 以 通过 “session 读 取 ”按钮 和 “local 
读 取 ”按钮 对 数据 进行 读 取 。 但 是 两 种 方法 对 数据 的 处 理 方式 不 一 样 : 使 用 sessionStorage 方法 时 ， 如 
果 关 闭 了 浏览 器 ， 这 个 数据 就 丢失 了 ， 下 次 打开 浏览 器 ， 单 击 “session 读 取 ” 按 钮 时 ， 读 取 不 到 任何 
数据 ; 使 用 localStorage 方法 时 ， 即 使 浏览 器 关闭 了 ， 下 次 打开 浏览 器 时 仍然 能 够 读 取 保存 的 数据 。 但 
是 ， 数 据 保存 是 按 不 同 的 浏览 器 分 别 进行 的 ， 也 就 是 说 ， 如 果 打 开 别 的 浏览 器 ， 是 读 取 不 到 在 这 个 浏 
览 器 中 保存 的 数据 的 。〈 实 例 位 置 ， 光盘 \TMIsN18\1) 
实现 本 例 的 具体 步骤 如 下 。 

(1) 准备 一 个 用 来 保存 数据 的 网 页 。 在 本 例 网 页 中 ， 在 页 面 上 放置 的 控件 如 表 18.1 所 示 。 


表 18.1 Web Storage 实例 的 页 面 中 元 素 


btn-4 


| 
| session 保存 
session 读 取 
local 保存 
| local 读 取 
| sssion comnt | 


session 计数 


local 计数 
该 实例 的 HTML 页 面 代码 如 下 所 示 。 


<p class="msg" id="msg_1"> </p> 
<p class="form_item"> 
<label for="> 要 保存 的 数据 : </label> 
<input type="text" name="text-1" value="" id="text-1"/></p> 
<p class="form_item"> 
<input type="button" name="btn-1" value="session 保存 " id="btn-1"/> 
<input type="button" name="btn-2" value="session 读 取 " id="btn-2"/> 
</p> 
<p class="form_item"> 
<input type="button" name="btn-3" value="local 保存 " id="btn-3"/> 
<input type="button" name="btn-4" value="local 读 取 " id="btn-4"/> 
</p> 
<p class="count_wrap"> 
session 计数 : <span class="count" id='session_count></span>&nbsp;&nbsp; 
local 计数 : <span class="count" id='"local_count'></span></p> 
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(2) 在 JavaScript 脚本 中 分 别 使 用 了 sessionStorage 和 localStorage 两 种 方法 。 这 两 种 方法 都 是 当 
户 在 input 文本 框 中 输入 内 容 时 “session 保存 ”按钮 和 “1local 保存 ”按钮 对 数据 进行 保存 ， 通 过 单 
击 “session 读 取 ” 按 钮 和 “local 读 取 ” 按 钮 对 数据 进行 读 取 。 实 现 的 代码 如 下 所 示 。 


function getE(eleX{ // 自 定义 一 个 getE() 函 数 
return document.getElementByld(ele); 。“”// 返 回 并 调用 document 对 象 的 getElementByld 方法 输出 变量 
var text_1 = getE('text-1"), /| 声明 变量 并 为 其 赋值 


mag = getE('msg_1"), 

btn_1 = getE('btn-1"), 

btn_2 = getE(btn-2)， 

btn_3 = getE(btn-3), 

btn_4 = getE(btn-4); 
btn_1.onclick = saveSessionStorage; 
btn_2.onclick = loadSessionStorage; 
btn_3.onclick = saveLocalStorage; 
btn_4.onclick = loadLocalStorage; 


function saveSessionStorage(){ 
sessionStorage.setltem('msg,',text_1.value + 'session ); 


function loadSessionStorage(){ 
mag.innerHTML = sessionStorage.getltem(msg'); 
} 
function saveLocalStorage(){f 
localStorage.setltem('msg,',text_1.value + ‘local'); 
} 
function loadLocalStorage(){ 
mag.innerHTML = localStorage.getltem(msg'); 


在 保存 数据 时 ， 如 果 使 用 sessionStorage 读 取 或 保存 数据 ， 则 需要 使 用 sessionStorage 对 象 并 调用 
该 对 象 的 读 写 方法 ， 如 果 使 用 localStorage 读 写 或 保存 数据 ， 则 需要 使 用 localStorage 对 象 并 调用 该 对 
象 的 读 写 方法 。 

在 读 取 数据 时 ， 不 管 是 哪个 对 象 ， 都 会 使 用 getItem 方法 来 读 取 数 据 ， 使 用 setItem 方法 来 保存 数 
据 。 保 存 数 据 时 按 “ 键 名 / 键 值 ”的 形式 进行 保存 。 使 用 getItem 方法 读 取 数据 时 ， 将 参数 指定 为 键 名 ， 
返回 键 值 。 使 用 setItem 方法 保存 数据 时 ， 将 第 一 个 参数 指定 为 键 名 ， 将 第 二 个 参数 指定 为 键 值 。 

(3) 通过 三 元 运算 符 来 定义 记录 页 面 的 次 数 ， 然 后 通过 setItem 方法 对 数据 进行 保存 ， 代 码 如 下 
所 示 。 


var local_count = localStorage.getltem('a_count)?localStorage.getltem('a_count'):0; 
getE(local_count').innerHTML = local_count; 
localStorage.setltem('a_count',+local_count+1); 


var session_count = sessionStorage.getltem('a_count)?sessionStorage.getltem(a_count'):0; 


getE('session_count').innerHTML = session_count; 
SessionStorage.setltem('a_count',+session_count+1); 
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器 中 的 运行 效果 如 图 18.1 所 示 。 
Dee 


日 sessicnstoragesilec- ~ 
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要 保存 的 数据 : [sg 

sessoa 诡 取 

ee 

ET 1 be gt 


De 3 加。 viewGoox) -一 -一 -一 一 


图 18.1 Opera 10 浏览 器 中 的 Web Storage 实例 


通过 sessonStorage 和 localStorage 实 现 的 访问 


18.1.4 ”Web Storage 综合 实例 一 一 留言 本 


例 18.2 下 面 来 看 一 个 简单 的 Web 留言 本 的 实例 。 使 用 一 个 多 行文 本 框 输入 数据 ， 单 击 按钮 时 将 


文本 框 中 的 数据 保存 到 localStorage 中 ， 在 表单 下 部 放置 一 个 p 元 素来 显示 保存 后 的 数据 。 


如 果 只 保存 文本 框 中 的 内 容 ， 并 不 能 知道 该 内 容 是 什么 时 候 写 好 的 ， 所 以 在 保存 该 内 容 的 同时 也 


保存 了 当前 日 期 和 时 间 ， 并 将 该 日 期 和 时 间 一 并 显示 在 p 元 素 中 。 
利用 Web Storage 保存 数据 时 ， 数 据 必 须 是 “ 键 名 / 键 值 ” 这 样 的 格式 ， 所 以 将 文本 框 的 内 容 作为 


键 值 ， 保 存 时 的 日 期 和 时 间作 为 键 名 来 进行 保存 ， 计 算 机 中 对 于 日 期 和 时 间 的 值 是 以 时 间 戳 的 天 
行 管理 的 ， 所 以 保存 时 不 可 能 存在 重复 的 键 名 。 


本 例 实现 的 主要 过 程 如 下 所 示 。 


(1) 编写 显示 页 面 


(实例 位 置 ， 光 盘 \TMN\sN\18\2) 


式 进 


的 HTML 代码 部 分 。 在 该 页 面 中 ， 除 了 输入 数据 用 的 文本 框 与 显示 数据 用 


的 p 元 素 之 外 ,还 放置 了 “添加 ”按钮 与 “全 部 清除 ”按钮 ， 单 击 “ 添 加 ”按钮 来 保存 数据 ， 单 击 “全 
部 清除 ”按钮 来 清除 全 部 数据 。 实 现 的 代码 如 下 所 示 。 


<h1> 简 单 Web 留言 本 </h1> 

<textarea id="memo" cols="60" rows="10"></textarea><br> 

<input type="button" value=" 添 加 "onclick="saveStorage( memo');"> 
<input type="button" value=" 全 部 清除 " onclick="clearStorage( msg');"> 


<hr> 
<p id="msg"></p> 


(2) 在 JavaScript 脚本 中 编写 单 击 “添加 ”按钮 时 调用 的 saveStorage 函数 , 在 这 个 函数 中 使 用 “new 
Date0.getTime0;” 语 句 得 到 了 当前 的 日 期 和 时 间 戳 ， 然 后 调用 localStorage.setItem 方法 , 将 得 到 的 时 间 


稚 作 为 键 值 ， 并 将 文本 框 中 


数 在 页 面 上 重新 显示 保存 后 的 数据 。 实 现 的 代码 如 下 所 示 。 


function saveStorage(id) 


的 数据 作为 键 名 进行 保存 。 保 存 完毕 后 ， 重 新 调用 脚本 中 的 loadStorage 函 
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var data = document.getElementByld(id).value; 
vartime = new Date().getTime(); 
localStorage.setltem(time,data); 
alert(" 数 据 已 保存 。"); 
loadStorage( msg'); 
| 
(3 ) 在 添加 完 数据 后 , 数据 将 以 表格 的 形式 进行 显示 。 取得 全 部 数据 的 时 候 , 需要 用 到 loadStorage 
两 个 比较 重要 的 属性 。 
回 loadStoragelength 一 一 所 有 保存 在 loadStorage 中 的 数据 的 条 数 。 
回 ”loadStorage.key(index) 一 一 将 想 要 得 到 数据 的 索引 号 作为 index 参 数 传 入 , 可 以 得 到 loadStorage 
中 与 这 个 索引 号 对 应 的 数据 。 例 如 ， 想 要 得 到 第 6 条 数据 ， 传 入 的 index 为 5 (index 是 从 0 
开始 计算 的 )。 
在 本 例 中 获取 保存 数据 主要 是 先 用 loadStorage.length 属性 获取 保存 数据 的 条 数 , 然后 做 一 个 循环 ， 
在 循环 内 用 一 个 变量 ， 从 0 开始 将 该 变量 作为 index 参数 传 入 loadStorage.key(index) 属 性 ， 每 次 循环 时 
该 变量 加 1， 以 此 取得 保存 在 loadStorage 中 的 所 有 数据 。 实 现 的 代码 如 下 所 示 。 


function loadStorage(id) 
{ 
var result = '<table border="1">"; 
for(var i = 0;i < localStorage.length;i++) 
{ 
var key = localStorage.key(i); 
var value = localStorage.getltem(key); 
var date = new Date(); 
date.setTime(key); 
var datestr = date.toGMTString(); 
result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>"; 


} 
result += '</table>"; 
var target = document.getElementByld(id); 
target.innerHTML = result; 
bE 
(4) 单 击 “ 全 部 清除 ”按钮 时 ， 调 用 clearStorage 函数 对 数据 进行 全 部 清除 ， 在 这 个 函数 中 只 有 
一 条 语句 “localStorage.clear();”， 调 用 localStorage 的 clear 方法 时 ， 所 有 保存 在 localStorage 中 的 数据 


会 被 全 部 清除 。 实 现代 码 如 下 所 示 。 


function clearStorage() 


遇 
localStorage.clear(); 
alert(" 全 部 数据 被 清除 。"); 
loadStorage(msg'); 

b 


该 实例 在 Opera 10 浏览 器 中 的 运行 效果 如 图 18.2 所 示 。 
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Sat, 05 Nov 2011 05:44:04 GIT 


Sat, O5 Nov 2011 05:44:15 OMT 


图 18.2 Opera 10 浏览 器 中 的 简单 Web 留言 本 实例 


18.1.5 JSON 对 象 的 存 数 实例 一 一 用 户 信息 卡 


虽然 HTML 5 Web Storage 规范 允许 将 任意 类 型 的 对 象 保存 为 键 / 值 对 的 形式 ， 实 际 情况 却 是 一 些 浏览 
器 将 数据 限定 为 文本 字符 串 类 型 。 不 过 ， 既 然 现 在 主流 浏览 器 原生 支持 JSON， 就 解决 了 这 个 问题 。JSON 
格式 是 JavaScript Object Notation 的 缩写 , 是 将 JavaScript 中 的 对 象 作为 文本 形式 来 保存 时 使 用 的 一 种 格式 。 
JSON 是 一 种 将 对 象 与 字符 串 可 以 相互 表示 的 数据 转换 标准 。JSON 一 直 是 通过 HTTP 将 对 象 从 浏 
览 器 传送 到 服务 器 的 一 种 常用 格式 。 现 在 ， 可 以 通过 序列 化 复杂 对 象 将 JSON 数据 保存 在 Storage 中 
以 实现 复杂 数据 类 型 的 持久 化 。 
例 18.3 ”下面 是 一 个 用 户 信息 卡 的 实例 ， 在 该 实例 中 将 用 户 的 信息 使 用 JSON 格式 进行 保存 。 使 
用 JSON 的 格式 作为 文本 来 保存 对 象 ， 获 取 该 对 象 时 再 通过 JSON 格式 ， 就 可 以 保存 和 读 取 具 有 复杂 
结构 的 数据 了 。〔 实 例 位 置 ， 光盘 \TMNsN18\3) 
本 例 实现 的 具体 过 程 如 下 。 
(1) 编写 显示 页 面 用 的 HTML 代码 部 分 。 在 该 页 面 中 ， 除 了 输入 数据 用 的 文本 框 与 显示 数据 用 
的 p 元 素 之 外 ， 还 放置 了 “保存 ”与 “ 按 姓名 查询 ”按钮 ， 单 击 “ 保 存 ” 按 钮 来 保存 数据 ， 单 击 “ 按 
姓名 查询 ”按钮 来 查询 用 户 信息 。 实 现 的 代码 如 下 所 示 。 
<table> 
<tr><td align="right"> 姓 名 :</td><td><input type="text" id="name"></td></tr> 
<tr><td align="right">EMAIL:</td><td><input type="text" id="email"></td></tr> 
<tr><td align="right"> 电 话 号 码 :</td><td><input type="text" id="tel"></td></tr> 
<tr><td align="right"> 备 注 :</td><td><input type="text" id="memo"></td></tr> 
<tr> 
<td colspan="2" align="center"><input type="button" value=" 保 存 " onclick="saveStorage();"></td> 
</tr> 
</table> 
<hr> 
<p> 查 询 : : 
<input type="text" id="find"> 
<input type="button" value=" 按 姓名 查询 " onclick="findStorage('msg");"> 
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</p> 
<p id="msg"></p> 
(2) 在 HTML 页 面 中 调用 saveStorage 函数 来 对 数据 实现 保存 ， 在 这 个 函数 中 首先 从 各 输入 文本 
框 中 获取 数据 ， 然 后 创建 对 象 ， 将 获取 的 数据 作为 对 象 的 属性 进行 保存 。 为 了 将 数据 保存 在 一 个 对 象 
中 ， 使 用 new Object 语句 创建 了 一 个 对 象 ， 将 各 种 数据 保存 在 该 对 象 的 各 个 属性 中 ， 为 了 将 对 象 转换 
成 JSON 格式 的 文本 数据 ， 使 用 了 JSON 对 象 的 stringify 方法 。 该 方法 的 使 用 方法 如 下 所 示 。 
var str = JSON.stringify(data); 


该 方法 接受 一 个 参数 data， 该 参数 表示 要 转换 成 JSON 格式 文本 数据 的 对 象 。 这 个 方法 的 作用 是 
将 对 象 转换 成 JSON 格式 的 文本 数据 ， 并 将 其 返回 。 
最 后 将 文本 数据 保存 在 localStorage 中 。 实 现 的 代码 如 下 所 示 。 


function saveStorage() 


{ 


var data = new Object; 

data.name = document.getElementByld(name').value; 
data.email = document.getElementByld(‘email').value; 
data.tel = document.getElementByld('tel').value; 
data.memo = document.getElementByld('memo').value; 
var str = JSON.stringify(data); 
localStorage.setltem(data.name,str); 

alert(" 数 据 已 保存 。"); 


(3) 在 HTML 页 面 中 调用 findStorage 函数 ， 对 数据 进行 查询 。 在 该 函数 中 ， 首 先 从 localStorage 
中 将 查询 用 的 姓名 作为 键 值 ， 获 取 对 应 的 数据 。 将 获取 的 数据 转换 成 JSON 对 象 。 该 函数 的 关键 是 使 
用 JSON 对 象 的 parse 方法 ， 将 从 localStorage 中 获取 的 数据 转换 成 JSON 对 象 。 该 方法 的 使 用 方法 如 
下 所 示 。 

var data =JSON.parse(str); 

该 方法 接受 一 个 参数 str, 此 参数 表示 从 localStorage 中 取得 的 数据 , 该 方法 的 作用 是 将 传 入 的 数据 
转换 为 JSON 对 象 ， 并 且 将 该 对 象 返 回 。 

在 取得 JSON 对 象 的 各 个 属性 值 之 后 ， 创 建 要 输出 的 内 容 ， 最 后 将 要 输出 的 内 容 在 页 面 上 输出 。 
实现 的 代码 如 下 所 示 。 


function findStorage(id) 
由 


var find = document.getElementByld(find').value; 
var str = localStorage.getltem(find); 

var data = JSON.parse(str); 

var result = "姓名 : " + data.name + '<br>"; 

result += "EMAIL: " + data.email + '<br>'; 

result += "电话 号 码 : " + data.tel + '<br>'; 

result += "备注 : " + data.memo + '<br>'; 

var target = document.getElementByld(id); 
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target.innerHTML = result; 
} 


目 户 信息 卡 分 为 姓名 、E-mail 地 址 、 电 话 号 码 、 说 明 这 几 项 ， 把 它们 保存 在 localStorage 中 。 在 查询 中 
以 用 户 的 姓名 进行 检索 ， 可 以 获取 这 个 用 户 的 所 有 信息 。 用 户 信息 卡 的 运行 效果 如 图 18.3 所 示 。 
cpa] 


EF- 


和 中 避 0- | 加 本地 locahoe/DJmr/17/17| 也 -| 生生 coc| 三 


用 户 信 息 卡 


电话 号 码 -W9792 
说 明 - | 全 花王 山 用户 


图 18.3 使 用 JSON 对 象 实现 的 用 户 信息 卡 


18.2 ”本 地 数据 库 


区 中 教学 录像 :光盘 \TM\Ix\18\ 本 地 数据 库 .exe 
18.2.1 Web SQL 数据 库 简 介 


Web SQL 数据 库 是 存储 和 访问 数据 的 另 一 种 方式 。 从 其 名 称 可 以 看 出 ， 这 是 一 个 真正 的 数据 库 ， 
可 以 查询 和 添加 数据 。 在 HTML 5 中 ， 大 大 丰富 了 客户 端 本 地 可 以 存储 的 内 容 ， 添 加 了 很 多 功能 来 将 
原本 必须 保存 在 服务 器 上 的 数据 转 为 保存 在 客户 端 本 地 ， 从 而 大 大 提高 了 Web 应 用 程序 的 性 能 ， 减 轻 
了 服务 器 端的 负担 。 

其 中 ， 一 项 非常 重要 的 功能 就 是 数据 库 的 本 地 存储 功能 。 在 HTML 5 中 内 置 了 一 个 可 以 通过 SQL 
语言 来 访问 的 数据 库 。 在 HTML 4 中 ， 数 据 库 只 能 放 在 服务 器 端 ， 通 过 服务 器 来 访问 数据 库 ， 但 是 在 
HTML 5 中 ， 可 以 就 像 访 问 本 地 文件 那样 轻松 地 对 内 置 数据 库 进行 直接 访问 。 

目前 ， 像 这 种 不 需要 存储 在 服务 器 上 的 ， 被 称 为 “SQLLite” 的 文件 型 SQL 数据 库 已 经 得 到 了 很 
广泛 的 利用 ， 所 以 HTML 5 中 也 采用 了 这 种 数据 库 来 作为 本 地 数据 库 。 因 此 ， 如 果 先 掌握 了 SQLLite 
数据 库 的 基本 知识 的 话 ， 接 着 再 学 习 如 何 使 用 HTML 5 的 数据 库 也 就 不 是 很 难 了 。 
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18.2.2 使 用 Web SQL Database API 


1. 打开 和 创建 数据 库 


初次 打开 一 个 数据 库 ， 就 会 自动 创建 数据 库 。 任 何 时 间 ， 在 该 域 上 只 能 拥有 指定 数据 库 的 一 个 版 
本 ， 因 此 如 果 创 建 了 版 本 1.0， 那 么 应 用 程序 在 没有 特定 地 改变 数据 库 的 版 本 时 ， 将 无 法 打开 1.1。 
打开 和 创建 数据 库 必 须 使 用 openDatabase 方法 来 创建 一 个 访问 数据 库 的 对 象 。 该 方法 的 使 用 方法 
如 下 所 示 。 

var db=openDatabase( 'db', "1.0' , first database',2*1024*1024); 

该 方法 使 用 4 个 参数 ， 第 一 个 参数 为 数据 库 名 ， 第 二 个 参数 为 版 本 号 ， 第 三 个 参数 为 数据 库 的 描 
述 ， 第 四 个 参数 为 数据 库 的 大 小 。 该 方法 返回 创建 后 的 数据 库 访 问 对 象 ， 如 果 该 数据 库 不 存在 ， 则 创 
建 该 数据 库 。 

为 了 确保 应 用 程序 有 效 , 并 且 检 测 对 Web SQL 数据 库 API 的 支持 , 还 应 该 测试 浏览 器 对 数据 库 的 
支持 ， 所 以 要 进行 测试 ， 测 试 代码 如 下 所 示 。 


var db; 
if(window.openDatabase}{ 

db = openDatabase('mydb', '1.0' , 'My first database',2*1024*1024); 
} 


2. 创建 数据 表 


实际 访问 数据 库 的 时 候 ， 还 需要 使 用 transaction 方法 ， 用 来 执行 事务 处 理 。 使 用 事务 处 理 ， 可 以 
防止 在 对 数据 库 进行 访问 及 执行 有 关 操 作 的 时 候 受到 外 界 的 干扰 。 因 为 在 Web 上 ,会 有 许多 人 同时 对 
页 面 进行 访问 。 如 果 在 访问 数据 库 的 过 程 中 ， 正 在 操作 的 数据 被 别 的 用 户 修改 掉 得 话 ， 会 引起 很 多 意 
想不到 的 后 果 。 因 此 ， 可 以 使 用 事务 来 达到 在 操作 完 之 前 ， 阻 止 别 的 用 户 访问 数据 库 的 目的 。 

transaction 方法 的 使 用 方法 如 下 所 示 。 

db.transaction(function(tx)X{ 


tx.executeSql('CREATE TABLE tweets(id,date,tweet)); 
六 


transaction 方法 使 用 一 个 回调 函数 为 参数 。 在 这 个 函数 中 ， 执 行 访问 数据 库 的 语句 。 

要 创建 数据 表 〈 以 及 数据 库 上 的 任何 其 他 事务 ) ， 必 须 启动 一 个 数据 库 “ 事 务 ”， 并 且 在 回调 中 
创建 该 表 。 事 务 回调 接受 一 个 参数 , 其 中 包含 了 事务 对 象 , 这 就 是 允许 运行 SQL 语句 并 且 运 行 executeSql 
方法 〈 在 下 面 的 例子 中 ， 就 是 tx) 的 内 容 。 这 通过 使 用 从 openDatabase 返回 的 数据 库 对 象 来 完成 ， 调 
事务 的 方法 如 下 所 示 。 

var db; 


if(window.openDatabase}X{ 
db = openDatabase('mydb', '1.0' ,My first database',2*1024*1024); 
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db.transaction(function(tx)X{ 
tx.executeSql(CREATE TABLE tweets(id,date,tweet)); 
ba 

} 


3. 插入 和 查询 数据 
接 下 来 ， 看 一 下 在 transaction 的 回调 函数 内 ， 到 底 是 怎样 访问 数据 库 的 。 这 里 ， 使 用 了 作为 参数 
传递 给 回调 函数 的 transaction 对 象 的 executeSql 方法 。 
executeSql 方法 的 完整 定义 如 下 所 示 。 
transaction.executeSql(sqlquery,[],dataHandler,errorHandler); 
该 方法 使 用 4 个 参数 ， 其 解释 如 下 。 
(1) 第 一 个 参数 为 需要 执行 的 SQL 语句 。 
(2) 第 二 个 参数 为 SQL 语句 中 所 有 使 用 到 的 参数 的 数组 。 在 executeSql 方法 中 ， 将 SQL 语句 中 
所 要 使 用 到 的 参数 先 用 “?” 代 替 ， 然 后 依次 将 这 些 参数 组 成 数组 放 在 第 二 个 参数 中 ， 如 下 所 示 。 
transaction.executeSql("UPDATE user set age=? where name=?;",[age,name]); 
(3) 第 三 个 参数 为 执行 sql 语句 成 功 时 调用 的 回调 函数 。 该 回调 函数 的 传递 方法 如 下 所 示 。 
function dataHandlerltransaction,results)t// 执 行 SQL 语句 成 功 时 的 处 理 }; 
该 回调 函数 使 用 两 个 参数 ， 第 一 个 参数 为 transaction 对 象 ， 第 二 个 参数 为 执行 查询 操作 时 返回 的 
查询 到 的 结果 数据 集 对 象 。 
(4) 第 四 个 参数 为 执行 SQL 语句 出 错时 调用 的 回调 函数 。 该 回调 函数 的 传递 方法 如 下 所 示 。 
function errorHandler(transaction,errmsg}{// 执 行 SQL 语句 出 错时 的 处 理 }; 
该 回调 函数 使 用 两 个 参数 ， 第 一 个 参数 为 transaction 对 象 ， 第 二 个 参数 为 执行 发 生 错 误 时 的 错误 
信息 文字 。 


当 执行 查询 操作 时 ， 如 何 从 查询 到 的 结果 数据 集中 依次 把 数据 取出 到 页 面 上 来 ， 最 简单 的 方法 是 
使 用 for 语句 循环 。 结 果 数 据 集 对 象 有 一 个 rows 属性 ， 其 中 保存 了 查询 到 的 每 条 记录 ， 记 录 的 条 数 可 
以 用 rows.length 来 获取 。 可 以 用 for 循环 ， 用 row[index] 或 rows.Item([index]) 的 形式 来 依次 取出 每 条 数 
据 。 在 JavaScript 脚本 中 ， 一 般 采 用 row[index] 的 形式 。 这 里 需要 注意 的 是 在 Google Chrome 5 浏览 器 
中 ， 不 支持 rows.Item([index]) 的 形式 。 


18.2.3 ”本 地 数据 库 实 例 一 一 用 户 登 录 


例 18.4 以 用 户 登 录 界 面 作为 实例 ， 来 看 一 下 具体 是 如 何 对 本 地 数据 库 进 行 简单 操作 的 。 在 页 下 
中 输入 用 户 名 和 密码 单 击 “ 登 录 ” 按 钮 ， 登 录 成 功 后 ， 用 户 名 、 密 码 以 及 登录 时 间 将 显示 在 页 面 上 ， 
单 击 “ 注 销 ”按钮 ， 将 清除 已 经 登录 的 用 户 名 、 密 码 以 及 登录 时 间 。 (实例 位 置 : 光盘 \TMNsIN18\4) 
本 例 的 运行 效果 如 图 18.4 所 示 。 
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C file///D:/mr/17/17-4.htr 义 


: 小米 


20051021 


Truesday，Novenber 08，2011 08:44:06 


‘ m 


图 18.4 用 户 登 录 界面 


注意 不 全 代用 Chrome 朋 新 闻 测 虹 吕 运行 ， 吾 则 用 户 训 来 的 时 间 不 能 于 党 显 让 ， 


本 例 实现 的 主要 过 程 如 下 所 示 。 

(1) 登录 界面 中 ， 存 在 一 个 输入 用 户 名 的 文本 框 、 一 个 输入 密码 的 密码 框 ， 以 及 两 个 按钮 ， 分 别 
是 “登录 ”和 “注销 ”按钮 。 分 别 为 “登录 ”按钮 设置 id 为 save; “注销 ”按钮 设置 id 为 clear。 实 现 
的 代码 如 下 所 示 。 


<form action="#" method="get" accept-charset="utf-8"> 

<p class="form_item"> 

用 户 名 : <input type="text" name=" value="" id="name" required/> 
</p> 

<p class="form_item"> 

密码 : <input type="password" name="" value="" id="msg" required></textarea> 
</p> 

<p class="form_item"> 

<input type="submit" id="save" value=" 登 录 "/> 

<input type="submit" id="clear" value=" 注 销 "/> 

</p> 

<hr> 

</form> 


(2) 打开 数据 库 实现 的 代码 如 下 所 示 。 
var db = openDatabase(myData','1.0',test database',1024*1024); 


db 变量 代表 使 用 openDatabase 方法 创建 的 数据 库 访问 对 象 。 在 这 个 实例 中 ， 创 建 了 MyData 这 个 
数据 库 并 对 其 进行 访问 。 
(3) 创建 数据 表 实 现 的 代码 如 下 所 示 。 


db.transaction(function(txj{ 
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tx.executeSql(CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)',0); 


这 条 语句 的 作用 是 在 数据 库 中 创建 一 张 数据 表 。 在 本 例 中 ， 在 数据 库 里 创建 了 一 个 带 有 三 个 字段 
的 数据 表 MsgData: 第 一 个 字段 为 TEXT 类 型 的 name 字段 ， 第 二 个 字段 为 TEXT 类 型 的 msg 字段 ， 
第 三 个 字段 为 INTEGER 类 型 的 time 字段 。 需 要 注意 的 是 ， 如 果 已 经 存在 了 数据 表 ， 重 复 创 建 该 数据 
表 时 会 引发 错误 ， 所 以 前 面 必须 加 上 “IF NOT EXISTS” 条 件 判 断 语句 。 这 样 ， 当 想 创建 的 表 在 数据 
库 中 已 经 存在 时 ， 就 不 会 重复 创建 了 。 

(4) 调用 两 个 按钮 的 id， 分 别 为 这 两 个 id 添加 onclick 事件 ，“ 注 销 ”按钮 是 调用 transaction 方 
法 实现 数据 表 中 数据 的 清除 ， 而 “登录 ”按钮 是 调用 saveData 函数 来 实现 数据 的 保存 。 实 现 的 代码 如 
下 所 示 。 


getE('clear').onclick = function() 


db.transaction(function(txX{ 
tx.executeSql(DROP TABLE MsgData',[]); 


showAllData() 
} 


getE('save').onclick = function(){ 
saveData(); 
return false; 


有 
(5) 调用 removeAllData 函数 ， 清 除 当前 显示 的 数据 ， 以 便 重 新 读 取 数 据 。 实 现 的 代码 如 下 所 示 。 


function removeAllData() 
{ 
for (var i = datalist.children.length-1; i >= 0; i--X{ 
datalist.removeChild(datalist.children[i]); 
} 
| 


(6) 调用 showData 函数 ， 该 函数 使 用 一 个 row 参数 。 该 参数 表示 从 数据 库 中 读 取 到 的 一 行 数 据 。 
将 读 取 后 的 数据 ， 输 出 到 页 面 中 。 实 现 的 代码 如 下 所 示 。 


function showData(row){ 
var dt = document.createElement('dt); 
dt.innerHTML = row.name; 
var dd = document.createElement('dd'); 
dd.innerHTML = row.msg; 
var tt = document.createElement('tt'"); 
var t = new Date(); 
t.setTime(row.time); 
tt.innerHTML =t.toLocaleDateString()+" "+ ttoLocaleTimeString(); 
datalist.appendChild(dt); 
datalist.appendChild(dd); 
datalist.appendChild(tt); 
， 
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(7) 调 用 showAllData 函数 ,该 函数 中 使 用 transaction 方法 ,在 该 方法 的 回调 函数 中 执行 executeSql 
方法 获取 全 部 数据 。 获 取 到 数据 之 后 ， 首 先 调用 removeAllData 函数 初始 化 页 面 ， 将 页 面 中 的 数据 清除 
后 ， 执 行 循 环 ， 将 获取 到 的 所 有 数据 都 以 result.rows.item(i) 的 形式 作为 参数 传 入 showData 函数 中 进行 
显示 。result.rows 代表 了 获取 到 的 数据 的 所 有 行 ， 而 result.rows.item(i) 则 代表 了 第 i 行 中 的 数据 ， 这 些 
数据 都 以 属性 和 属性 值 的 形式 存放 在 result.rows.item(i) 对 象 中 , 并 通过 访问 属性 的 方法 来 获取 每 个 字段 
的 内 容 。 本 例 中 通过 result.rows.item(i).name、result.rows.item(i).lengh、result.rows.item(i).time 这 3 个 属 


性 来 获取 每 行 数 据 的 name 字段 、lengh 字段 、time 字段 中 的 内 容 。 实 现 的 代码 如 下 所 示 。 


function showAllData() 


db.transaction(function(tx) 
由 
tx.executeSql(CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER),D); 
tx.executeSql('SELECT * FROM MsgData',0,function(tx,resulti{ 
removeAllData(); 
for(var i=0; i < result.rows.length; i++}{ 
showData(result.rows.item(i)); 


»); 


(8) 调 用 addData 函数 ,在 这 个 函数 中 ,使 用 transaction 方 法 ,在 该 方法 的 回调 函数 中 执行 executeSql 
方法 ， 将 作为 参数 传 入 进来 的 数据 保存 在 数据 库 中 。 实 现 的 代码 如 下 所 示 。 


function addData(name,msg,time) 


db.transaction(function(tx) 


{ 
tx.executeSql(INSERT INTO MsgData VALUES(?,?,?),[name,msg,time],function(tx,result) 


{ 
alert(" 登 录 成 功 "); 
ree) 


alert(error.source + ':' + error.message); 
»; 
ba 
} 


(9) 调用 saveData 函数 ， 在 该 函数 中 首先 调用 addData 函数 追加 数据 ， 然 后 调用 showAllData 函 
新 显示 页 面 中 的 全 部 数据 。 实 现 的 代码 如 下 所 示 。 


function saveData() 
上 
var name =getE(name').value; 
var msg = getE('msg').value; 
vartime = new Date().getTime(); 
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addData(name,msg,time); 
showAllData(); 
} 


18.3 小 结 


本 章 主要 介绍 了 关于 本 地 存储 的 两 个 重要 内 容 一 一 Web Storage 与 本 地 数据 库 。 本 地 数据 库 是 
HTML 5 新 增 的 一 个 功能 。 本 章 讲解 了 本 地 数据 库 的 创建 与 各 种 操作 ， 并 通过 多 个 实例 具体 讲解 各 种 
操作 。 学 完 本 章 ， 读 者 会 对 本 地 数据 库 有 一 个 初级 的 了 解 。 


18.4 习 题 
选择 题 
1. 下 面 支持 本 地 数据 库 的 浏览 器 的 是 (  ) 。 
A. IE8 B. Firefox 3.0 C. Chrome D. 以 上 都 支持 
2. 在 Google Chrome 5 浏览 器 中 不 支持 的 格式 为 〈 ) 。 
A. row[index] B. rows.([index]) C. rows.Item([index]) D. command 
3， 下面 的 代码 中 ， 打 开 和 创建 本 地 数据 库 的 是 〈 Ji 


A. context.arc( 100, 100, 75, 0, Math.PI * 2, false); 

B. var db=openDatabase( 'db', '1.0', 'first database',2*1024*1024); 
C. tx.executeSql(CREATE TABLE tweets(id,date,tweeb); 

D. 以 上 都 不 正确 


判断 题 

4. sessionStorage 为 永久 保存 。 ) 

填空 题 

5. Web Storage 分 为 和 两 种 。 

6. 格式 是 JavaScript Object Notation 的 缩写 ， 是 将 JavaScript 中 的 对 象 作为 文本 形式 来 


保存 时 使 用 的 一 种 格式 。 
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离线 应 用 程序 


( 后 教学 录像 : 13 分 钟 ) 


在 HTML5 中 ， 提 供 了 一 个 供 本 地 缓存 使 用 的 API， 使 用 这 个 API 可 以 实现 离 
线 Web 应 用 程序 的 开发 。 离 线 Web 应 用 程序 是 指 当 客户 端 与 Web 应 用 程序 的 服 
务 器 没有 建立 连接 时 ， 也 能 正常 在 客户 端 本 地 使 用 该 Web 应 用 程序 进行 有 关 操 作 。 
本 章 将 对 这 个 API 做 一 个 详细 的 介绍 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


WI 掌握 离线 Web 应 用 程序 的 基本 概念 
Wp 掌握 HTML 5 离线 应 用 
MH ”掌握 浏 览 路 与 服务 跟 的 交互 过 程 
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19.1 HTML 5 离线 Web 应 用 概述 


19.1.1 离线 Web 应 用 概述 


在 Web 应 用 中 使 用 缓存 的 原因 之 一 是 为 了 支持 离线 应 用 。 在 全 球 互联 的 时 代 ， 离 线 应 用 仍 有 其 实 
价值 。 当 无 法 上 网 的 时 候 ， 你 会 做 什么 呢 ? 你 可 能 会 说 如 今 网 络 无 处 不 在 ， 而 且 非 常 稳 定 ， 不 存在 
没有 网 络 的 情况 。 但 事实 果真 如 此 吗 ? 下 面 这 些 问 题 ， 你 考虑 到 了 吗 ? 

回 ”乘坐 火车 过 隧道 的 时 候 信号 好 吗 ? 

回 ”使 用 移动 网 络 设备 的 信号 好 吗 ? 

回 ”要 去 给 客户 做 演示 的 时 候 ， 一 定 能 有 信号 吗 ? 

越 来 越 多 的 应 用 移植 到 了 Web 上 ， 我 们 倾向 于 认为 用 户 拥有 24 小 时 不 间断 的 网 络 连 线 。 但 事实 
上 ， 网 络 连接 中 断 的 情况 时 有 发 生 ， 例 如 ， 在 乘坐 飞机 时 ， 可 预见 的 中 断 时 间 一 次 就 可 能 达到 好 几 个 
小 时 。 

间断 性 的 网 络 连接 一 直 是 网 络 计算 系统 致命 的 弱点 。 如 果 应 用 程序 依赖 于 与 远程 主机 的 通信 ， 而 
这 些 主机 又 无 法 连接 时 ， 用 户 就 无 法 正常 使 用 应 用 程序 了 。 不 过 当 网 络 连接 正常 时 ，Web 应 用 程序 可 
以 保证 及 时 更 新 ， 因 为 用 户 每 次 使 用 ， 应 用 程序 都 会 从 服务 器 更 新 加 载 相关 数据 。 

如 果 应 用 程序 只 需要 偶尔 进行 网 络 通信 ， 那 么 只 要 在 本 地 存储 了 应 用 资源 ， 无 论 是 否 连接 网 络 它 都 
用 。 随 着 完全 依赖 于 浏览 器 的 设备 的 出 现 ，Web 应 用 程序 在 不 稳定 的 网 络 状态 下 还 能 够 持续 工作 就 变 
得 更 加 重要 。 在 这 方面 ， 不 需要 持续 连接 网 络 的 桌面 应 用 程序 历来 被 认为 比 Web 应 用 程序 更 有 优势 。 
HTML 5 的 缓存 控制 机 制 综合 了 Web 应 用 和 桌面 应 用 两 者 的 优势 : 基于 Web 技术 构建 的 Web 应 
程序 ， 可 在 浏览 器 中 运行 并 在 线 更 新 ， 也 可 在 脱 机 情况 下 使 用 。 然 而 ， 因 为 目前 的 Web 服务 器 不 为 脱 机 
应 用 程序 提供 任何 默认 的 缓存 行为 ， 所 以 要 想 使 用 这 一 新 的 离线 应 用 功能 ， 必 须 在 应 用 中 明确 声明 。 

HTML 5 的 离线 应 用 缓存 使 得 在 无 网 络 连接 状态 下 运行 应 用 程序 成 为 可 能 。 这 类 应 用 程序 用 处 很 
多 ， 如 在 书写 电子 邮件 草稿 时 就 无 须 连 接 因 特 网 。HTML 5 中 引入 了 离线 应 用 缓存 ， 有 了 它 Web 应 用 
程序 就 可 以 在 没有 网 络 连接 的 情况 下 运行 。 

应 用 程序 开发 人 员 可 以 指定 HTML 5 应 用 程序 中 ， 具 体 哪些 资源 (如 HTML、CSS、JavaScript 和 
图 像 ) 脱 机 时 可 用 。 离 线 应 用 的 适用 场景 很 多 ， 如 下 列 情 况 。 

加 ”阅读 和 撰写 电子 邮件 。 

加 ”编辑 文档 。 

加 ”编辑 和 显示 演示 文档 。 

加 ”创建 待 办 事宜 列表 。 

使 用 离线 存储 ， 避 免 了 加 载 应 用 程序 时 所 需 的 常规 网 络 请 求 。 如 果 缓 存 清单 文件 是 最 新 的 ， 浏 览 
器 就 知道 自己 无 须 检查 其 他 资源 是 否 最 新 。 大 部 分 应 用 程序 可 以 非常 迅速 地 从 本 地 应 用 缓存 中 加 载 完 
成 。 此 外 ， 从 缓存 中 加 载 资 源 〈 而 不 必用 多 个 HTTP 请 求 确定 资源 是 否 已 经 更 新 ) 可 节省 带宽 ， 这 对 
于 移 除 Web 应 用 是 至 关 重 要 的 。 
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缓存 清单 文件 中 标识 的 资源 构成 了 应 用 缓存 (applicationcache) ， 它 是 浏览 器 持久 性 存储 资源 的 地 
方 ， 通 常 在 硬盘 上 。 有 些 浏览 器 向 用 户 提供 了 查看 应 用 程序 缓存 中 数据 的 方法 。 例 如 ， 在 最 新 版 本 的 
Firefox 中 ，about:cache 页 面 会 显示 应 用 程序 缓存 的 详细 信息 ， 提 供 了 查看 缓存 中 的 每 个 文件 的 办 法 ， 
如 图 19.1 所 示 。 


图 191 在 Firefox 中 查看 离线 组 丰 
19.1.2 ”本 地 缓存 与 浏览 器 网 页 缓存 的 区 别 


Web 应 用 程序 的 本 地 缓存 与 浏览 器 网 页 缓存 在 许多 方面 都 有 明显 的 区 别 。 

首先 ， 本 地 缓存 是 为 整个 Web 应 用 程序 服务 的 ， 而 浏览 器 的 网 页 缓存 只 服务 于 单个 网 页 。 任 何 网 
页 都 具有 网 页 缓存 ， 而 本 地 缓存 只 缓存 那些 指定 需要 缓存 的 网 页 。 

其 次 ， 网 页 缓存 是 不 安全 、 不 可 靠 的 ， 因 为 我 们 不 知道 在 网 站 中 到 底 缓 存 了 哪些 网 页 ， 以 及 缓存 
了 网 页 上 的 哪些 资源 。 而 本 地 缓存 是 可 靠 的 ， 我 们 可 以 控制 对 哪些 内 容 进行 缓存 ， 不 对 哪些 内 容 进 行 
缓存 ， 开 发 人 员 还 可 以 用 编程 的 手段 来 控制 缓存 的 更 新 ， 利 用 缓存 对 象 的 各 种 属性 、 状 态 和 事件 来 开 
发 出 更 强大 的 离线 应 用 程序 。 


19.2 ”创建 HTML 5 离线 应 用 
区 0 教学 录像 : 光盘 \TIMNIx\19\ 创 建 HTML 5 离线 应 用 .exe 


19.2.1 缓存 清单 (manifest) 


Web 应 用 程序 的 本 地 缓存 是 通过 每 个 页 面 的 manifest 文件 来 管理 的 .manifest 文件 是 一 个 简单 文本 
文件 ， 在 该 文件 中 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需要 被 缓存 的 资源 文件 的 文件 名 称 ， 以 及 这 些 
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资源 文件 的 访问 路 径 。 可 以 为 每 一 个 页 面 单独 指定 一 个 manifest 文件 ， 也 可 以 对 整个 Web 应 用 程序 指 
定 一 个 总 的 manifest 文件 。 下 面 为 manifest 文件 的 一 个 实例 ， 该 文件 为 mr.html 网 页 的 manifest 文件 ， 
通过 这 个 实例 来 对 manifest 文件 做 一 个 详细 介绍 。 


CACHE MANIFEST 

# 文 件 的 开头 必须 书写 CACHE MANIFEST 
# 这 个 manifest 文件 的 版 本 号 
#version 9 

CACHE: 

other.html 

mrjs 

images/mrphoto.jpg 
NETWORK: 
http://192.168.1.96:82/mr 
mr.php 


FALLBACK: 
online.js locale.js 
CACHE: 
newmr.html 
newmr.js 


在 manifest 文件 中 ， 第 一 行 必须 是 “CACHE MANIFEST”， 以 把 本 文件 的 作用 告知 给 浏览 器 ， 即 
对 本 地 缓存 中 的 资源 文件 进行 具体 设置 。 

在 manifest 文件 中 ， 可 以 加 上 注释 来 进行 一 些 必要 的 说 明 或 解释 ， 注 释 行 以 “#” 字 符 开 头 。 注 释 
前 面 可 以 有 空格 ， 但 是 必须 是 单独 的 一 行 。 

在 manifest 文件 中 最 好 加 上 一 个 版 本 号 ， 以 表示 这 个 manifest 文件 的 版 本 。 版 本 号 可 以 是 任何 形 
式 的 ， 如 “version 201011211108”， 更 新 manifest 文件 的 时 候 一 般 也 会 对 这 个 版 本 号 进行 更 新 。 

接 下 来 ， 指 定 资源 文件 ， 文 件 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 ， 指 定时 每 个 资源 文件 为 
一 行 


在 指定 资源 文件 的 时 候 , 可 以 把 资源 文件 分 为 3 类 , 分 别 是 CACHE、 NETWORK 和 FALLBACK。 

在 CACHE 类 别 中 指定 需要 被 缓存 在 本 地 的 资源 文件 。 为 某 个 页 面 指定 需要 本 地 缓存 的 资源 
文件 时 ， 不 需要 把 这 个 页 面 本 身 指 定 在 CACHE 类 别 中， 因为 如 果 一 个 页 面具 有 manifest 文 
件 ， 浏 览 器 会 自动 对 这 个 页 面 进行 本 地 缓存 。 

NETWORK 类 别 为 显示 指定 不 进行 本 地 缓存 的 资源 文件 ， 这 些 资源 文件 只 有 当 客 户 端 与 服务 
器 建立 连接 的 时 候 才 能 访问 。 这 些 资源 文件 只 有 当 客 户 端 与 服务 器 端 建立 连接 的 时 候 才 能 访 
问 。 本 实例 该 类 别 中 的 “*” 为 通配符 ， 表 示 没 有 在 本 manifest 文件 中 指定 的 资源 文件 都 不 进 
行 本 地 缓存 。 

回 FALLBACK 类 别 中 的 每 行 中 指定 两 个 资源 文件 , 第 一 个 资源 文件 为 能 够 在 线 访问 时 使 用 的 资 
源 文件 ， 第 二 个 资源 文件 为 不 能 在 线 访问 时 使 用 的 备用 资源 文件 。 

每 个 类 别 都 是 可 选 的 。 但 是 如 果 文 件 开头 没有 指定 类 别 而 直接 书写 资源 文件 的 时 候 ， 浏 览 器 把 这 

些 资源 文件 视 为 CACHE 类 别 ， 直 到 看 见 文件 中 第 一 个 被 书写 出 来 的 类 别 为 止 。 例 如 下 面 的 清单 中 ， 

浏览 器 会 把 NETWORK 类 别 之 前 的 文件 都 视 为 CACHE 类 别 。 
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CACHE MANIFEST 

# 此 处 没有 写 明 CACHE 类 别 
other.html 

mr.js 

images/mrphoto.jpg 
NETWORK: 
http://192.168.1.96:82/mr 
mr.php 


允许 在 同一 个 manifest 文件 中 重复 书写 同一 类 别 ， 如 下 面 的 manifest 清单 。 


CACHE MANIFEST 
CACHE: 

other.html 

mrjs 

NETWORK: 
http://192.168.1.96:82/mr 
mr.php 

# 追 加 CACHE 类 别 中 的 内 容 
CACHE: 
images/mrphoto.jpg 


19.2.2 配置 IIS 服务 器 


在 应 用 程序 完全 离线 之 前 ， 还 需要 正确 地 提供 清单 文件 。 清 单 文 件 必须 有 扩展 名 .manifest 和 正确 
的 mime-type。 

如 果 使 用 Apache 这 样 的 通用 Web 服务 器 ， 需 要 找到 在 AppServ/Apache2.2/conf 文件 夹 中 的 
mine.types 文件 并 向 其 添加 如 下 所 示 的 内 容 。 


text/cache-manifest manifest 


这 可 以 确保 当 请 求 任何 扩展 名 为 .manifest 的 文件 时 ，Apache 将 发 送 text/cache-manifest 文件 头 部 。 

在 微软 的 IIS 服务 器 中 的 步骤 如 下 所 示 。 

(1) 右键 单 击 默认 网 站 或 需要 添加 类 型 的 网 站 ， 弹 出 属性 对 话 框 。 

(2) 选择 “HTTP 头 ”标签 。 

(3) 在 MIME 映射 下 ， 单 击 文件 类 型 按钮 。 

(4) 在 打开 的 MIME 类 型 对 话 框 中 单 击 新 建 按钮 。 

(5) 在 关联 扩展 名 文本 框 中 输入 “manifest”， 在 内 容 类 型 文本 框 中 输入 “text/cache-manifest”， 
然后 单 击 确定 按钮 。 


19.2.3 ”浏览 缓存 清单 


为 了 让 浏览 器 能 够 正常 阅读 该 文本 文件 , 需要 在 Web 应 用 程序 页 面 上 的 html 标签 的 manifest 属性 
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中 指定 manifest 文件 的 URL 地 址 。 指 定 方法 如 下 所 示 。 

<!-- 可 以 为 每 个 页 面 单 独 指定 一 个 manifest 文件 --!> 

<html manifest="mr.manifest"> 

</html> 

<!-- 也 可 以 为 整个 Web 应 用 程序 指定 一 个 总 的 manifest 文件 --!> 

<html manifest="mrsoft.manifest"> 

</html> 

至 此 ， 将 资源 文件 保存 到 本 地 缓存 区 的 基本 操作 就 完成 了 。 当 要 对 本 地 缓存 区 的 内 容 进行 修改 时 ， 
只 要 修改 manifest 文件 就 可 以 了 。 文 件 被 修改 后 ， 浏 览 器 可 以 自动 检查 manifest 文件 ， 并 自动 更 新 本 
地 缓存 区 中 的 内 容 。 


19.3 浏览 器 与 服务 器 互 过 程 


当 使 用 离线 应 用 程序 时 ,理解 浏览 器 和 服务 器 之 间 的 通信 过 程 很 有 用 .例如 ,一 个 http://localhost:82/ 
mr/ 网 站 ， 以 index.html 为 主页 ， 该 主页 使 用 index. manifest 文件 为 manifest 文件 ， 在 该 文件 中 请 求 本 
地 缓存 index.html、mr.js、mrl.jpg、mr2.jpg 等 资源 文件 。 首 次 访问 http://localhost:82/mr/ 网 站 时 ， 它 们 
的 交互 过 程 如 下 所 示 。 

(1) 浏览 器 :请 求 访问 http://localhost:82/mr/。 

(2) 服务 器 : 返回 index.html 网 页 。 

(3) 浏览 器 : 解析 index.html 网 页 ， 请 求 页 面 中 所 有 资源 ， 包 括 HTML 文件 、 图 像 文 件 、CSS 文 
件 、JavaScript 脚本 文件 ， 以 及 清单 文件 。 

(4) 服务 器 : 返回 所 有 请 求 的 资源 。 

(5) 浏览 器 : 处 理 清单 并 请 求 清单 中 的 所 有 项 ， 包 括 index.html 页 面 本 身 ， 即 使 刚才 已 经 请 求 过 
这 些 文件 。 如 果 要 求 本 地 缓存 所 有 文件 ， 这 将 是 一 个 比较 大 的 重复 的 请 求 过 程 。 

(6) 服务 器 : 返回 所 有 要 求 本 地 缓存 的 文件 。 

(7) 浏览 器 : 对 本 地 缓存 进行 更 新 ， 存 入 包括 页 面 本 身 在 内 的 所 有 要 求 本 地 缓存 的 资源 文件 ， 并 
且 触 发 一 个 事件 ， 通 知 本 地 缓存 被 更 新 。 

现在 , 浏览 器 使 用 清单 中 列 出 的 文件 完全 载 入 了 缓存 。 如 果 再 次 打开 浏览 器 访问 http://localhost:82/ 
mr/ 网 站 ， 而 且 manifest 文件 没有 被 修改 过 ， 它 们 的 交互 过 程 如 下 所 示 。 

(1) 浏览 器 : 再 次 请 求 访问 http://localhost:82/mr/。 

(2) 浏览 器 : 发 现 这 个 页 面 被 本 地 缓存 ， 于 是 使 用 本 地 缓存 中 index.html 页 

(3) 浏览 器 : 解析 index.html 网 页 ， 使 用 所 有 本 地 缓存 中 的 资源 文件 。 

(4) 浏览 器 : 向 服务 器 请 求 manifest 文件 。 

(5) 服务 器 : 返回 一 个 304 代码 ， 通 知 浏览 器 manifest 没有 发 生变 化 。 
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只 要 页 面 上 的 资源 文件 被 本 地 缓存 过 ， 下 次 浏览 器 打开 这 个 页 面 时 ， 总 是 先 使 用 本 地 缓存 中 的 资 
源 ， 然 后 请 求 manifest 文件 。 

如 果 再 次 打开 浏览 器 时 manifest 文件 已 经 被 更 新 过 了 ， 那 么 浏览 器 与 服务 器 之 间 的 交互 过 程 如 下 
所 示 。 

(1) 浏览 器 : 再 次 请 求 访 问 http://localhost:82/mr/。 

(2) 浏览 器 : 发 现 这 个 页 面 被 本 地 缓存 ， 于 是 使 用 本 地 缓存 中 index.html 页 面 。 

(3) 浏览 器 : 解析 index.html 网 页 ， 使 用 所 有 本 地 缓存 中 的 资源 文件 。 

(4) 浏览 器 : 向 服务 器 请 求 manifest 文件 。 

(5) 服务 器 : 返回 更 新 过 的 manifest 文件 。 

(6) 浏览 器 : 处 理 manifest 文件 ， 发 现 该 文件 已 被 更 新 ， 于 是 请 求 所 有 要 求 进行 本 地 缓存 的 资源 
文件 ， 包 括 index.html 页 面 本 身 。 

(7) 浏览 器 : 返回 要 求 进行 本 地 缓存 的 资源 文件 。 

(8) 浏览 器 : 对 本 地 缓存 进行 更 新 ， 存 入 所 有 新 的 资源 文件 ， 并 且 触 发 一 个 事件 ， 通 知 本 地 缓存 
被 更 新 。 

需要 注意 的 是 ， 即 使 资源 文件 被 修改 过 了 ， 任 何 之 前 载 入 的 资源 都 不 会 变化 。 例 如 ， 图 像 不 会 突 
然 改变 ， 旧 的 JavaScript 函数 不 会 改变 。 也 就 是 说 ， 这 时 更 新 过 后 的 本 地 缓存 中 的 内 容 还 不 能 被 使 

只 有 重新 打开 这 个 页 面 的 时 候 才 会 使 用 更 新 过 后 的 资源 文件 。 另 外 ， 如 果 不 想 修改 manifest 文件 中 对 

于 资源 文件 的 设置 ， 但 是 对 服务 器 上 请 求 缓存 的 资源 文件 进行 了 修改 ， 那 么 可 以 通过 修改 版 本 号 的 方 
式 来 让 浏览 器 认为 manifest 文件 已 经 被 更 新 过 了 ， 以 便 重新 下 载 修改 过 的 资源 文件 。 

在 19.4 节 中 ， 将 介绍 如 何 利用 applicationCache 对 象 手工 进行 本 地 缓存 的 更 新 。 


19.4 applicationCache 对 象 


区 教学 录像 ， 光盘 \TIM\Ix\19\ applicationCache 对 象 .exe 

applicationCache 对 象 代表 了 本 地 缓存 ， 可 以 用 它 来 通知 用 户 本 地 缓存 已 被 更 新 ， 也 允许 用 户 手工 
更 新 本 地 缓存 。 只 有 在 清单 已 经 修改 时 ，applicationCache 才 会 接受 一 个 事件 表明 它 已 经 更 新 。 

在 前 面 讲 到 的 浏览 器 与 服务 器 的 交互 过 程 中 ， 一 旦 浏览 器 使 用 清单 中 的 文件 完成 了 缓存 的 载 入 ， 
就 在 applicationCache 上 触发 更 新 事件 。 可 以 使 用 这 个 事件 来 告诉 用 户 ， 他 们 正在 使 用 的 应 用 程序 已 经 
升级 ， 并 且 应 该 重新 载 入 浏览 器 窗口 以 获得 应 用 程序 最 新 、 最 好 的 版 本 。 这 部 分 代码 如 下 所 示 。 

applicationCache.onUpdateReady = function(X{ 

// 本 地 缓存 已 被 更 新 ， 通 知 用 户 。 

alert(" 本 地 缓存 已 被 更 新 ， 您 可 以 刷新 页 面 来 得 到 本 程序 的 最 新 版 本 。"); 

} 


另外 ,可 以 通过 applicationCache 的 swapCache 方法 来 控制 如 何 进行 本 地 缓存 的 更 新 及 更 新 的 时 机 。 
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19.4.1 swapCache 方法 


swapCache 方法 用 来 手工 执行 本 地 缓存 的 更 新 ， 它 只 能 在 applicationCache 对 象 的 updateReady 事 
件 被 触发 时 调用 ，updateReady 事件 只 有 服务 器 上 的 manifest 文件 被 更 新 ， 并 且 把 manifest 文件 中 所 要 
求 的 资源 文件 下 载 到 本 地 后 才能 触发 。 顾 名 思 义 ， 这 个 事件 的 含义 是 “本 地 缓存 准备 被 更 新 ”。 这 个 
事件 被 触发 后 ， 可 以 用 swapCache 方法 来 手工 进行 本 地 缓存 的 更 新 。 接 下 来 看 一 下 在 什么 场合 应 用 该 
方法 。 

首先 ， 如 果 本 地 缓存 的 容量 非常 大 ， 本 地 缓存 的 更 新 工作 将 需要 相对 较 长 的 时 间 ， 而 且 还 会 把 浏 
览 器 锁 住 。 这 时 ， 就 需要 一 个 提示 ， 告 诉 用 户 正 在 进行 本 地 缓存 的 更 新 ， 代 码 如 下 所 示 。 


applicationCache.onUpdateReady = function(){ 

// 本 地 缓存 已 被 更 新 ， 通 知 用 户 

alert(" 正 在 更 新 本 地 缓存 "); 

applicationCache.swapCache(); 

alert(" 本 地 缓存 已 被 更 新 ， 您 可 以 刷新 页 面 来 得 到 本 程序 的 最 新 版 本 。"); 


上 
在 上 面 的 代码 中 ， 如 果 不 调 用 swapCache 方法 也 能 实现 更 新 ， 但 是 ， 更 新 的 时 间 不 一 样 。 不 调用 
swapCache 方法 ， 本 地 缓存 将 在 下 次 打开 本 页 面 时 被 更 新 ， 如 果 调 用 swapCache 方法 的 话 ， 本 地 缓存 
将 会 被 立刻 更 新 。 因 此 ， 可 以 使 用 confirm 方法 让 用 户 自己 选择 更 新 的 时 间 一 一 是 立刻 更 新 , 还 是 在 下 
次 打开 画面 时 再 更 新 。 
需要 注意 的 是 ， 尽 管 使 用 swapCache 方法 立刻 更 新 了 本 地 缓存 ， 但 是 并 不 意味 着 页 面 上 的 图 像 和 
脚本 文件 也 会 被 立刻 更 新 ， 更 新 在 重新 打开 本 页 面 时 才 会 生效 。 
例 19.1 下 面 来 看 一 个 完整 的 使 用 swapCache 方法 的 实例 。 在 该 实例 中 ， 使 用 到 了 applicationCache 
对 象 的 另 一 个 方法 applicationCache.update， 该 方法 的 作用 是 检查 服务 器 上 的 manifest 文件 是 否 有 更 新 。 在 
打开 画面 时 设 定 了 3 秒 钟 执行 一 次 该 方法 ， 检 查 服务 器 上 的 manifest 文件 是 否 有 更 新 。 如 果 有 更 新 ， 浏 览 
器 会 自动 下 载 manifest 文件 中 所 有 请 求 本 地 缓存 的 资源 文件 ， 当 这 些 资源 文件 下 载 完毕 时 ， 会 触发 
updateReady 事件 ， 询 问 用 户 是 否 立刻 刷新 页 面 以 使 用 最 新 版 本 的 应 用 程序 ， 如 果 用 户 选择 立刻 刷新 ， 则 调 
swapCache 方法 手工 更 新 本 地 缓存 ， 更 新 完毕 后 刷新 页 面 。〈 实 例 位 置 ， 光盘 \TMN\sINM9\1) 
其 中 画面 的 HTML 代码 如 下 所 示 。 
<IDOCTYPE HTML> 
<html manifest="swapCache.manifest"> 
<head> 
<meta charset="UTF-8"> 
<title> swapCache 方法 示例 </title> 
<script src="script.js"></script> 
</head> 
<body onload="init()"> 
<p>swapCache 方法 示例 </p> 


</body> 
</html> 


375 


HTML 5 从 入 门 到 精通 
该 HTML 中 嵌入 了 一 个 scriptjs 脚本 文件 ， 在 这 个 脚本 中 的 函数 init 内 编写 手工 检查 更 新 的 代码 。 
该 脚本 文件 中 的 代码 如 下 所 示 。 


function init() { 
setlnterval(function() 


记 


applicationCache.update(); /手工 检查 是 否 有 更 新 
}, 3000); 
applicationCache.addEventListener("updateready", function(X{ 
if(confirm(" 本 地 缓存 已 被 更 新 ， 需 要 刷新 画面 来 获取 应 用 程序 最 新 版 本 ， 是 否 刷新 ? "))f 
applicationCache.swapCache(); /手工 更 新 本 地 缓存 
ocation.reload(); // 重 载 画面 
} 
}, true); 


} 
该 实例 中 使 用 的 swapCache.manifest 文件 内 容 比较 简单 ， 代 码 如 下 所 示 。 


CACHE MANIFEST 
#version 7.20 
CACHE: 

script.js 


本 例 运 行 的 效果 如 图 19.2 所 示 。 


<152168196> 
本 地 赫 存 已 村 更 新 委 要 3 生得 站 到 职 应 月 信 县 新 二 
本 ,是否 忆 新 ? 


站 停止 执行 此 页 面 中 的 革 本 [ 交 定 ，，] [到 江 


图 19.2 swapCache 方法 实例 运行 效果 


19.4.2 applicationCache 对 象 的 事件 


applicationCache 对 象 除了 具有 update 方法 与 swapCache 方法 之 外 ， 还 具有 一 系列 的 事件 。 下 面 通 
过 前 面 讲 过 的 浏览 器 与 服务 器 的 交互 过 程 来 看 一 下 在 这 个 过 程 中 的 这 些 事件 是 如 何 被 触发 的 。 
首次 访问 http://localhost:82/mr/ 网 站 。 
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(1) 浏览 器 : 请 求 访问 http://localhost:82/mr/。 

(2) 服务 器 : 返回 index.html 网 页 。 

(3) 浏览 器 : 发现 该 网 页 具有 manifest 属性 ， 触 发 checking 事件 ， 检 查 manifest 文件 是 否 存 在 。 
不 存在 时 ， 触 发 error 事件 ， 表 示 manifest 文件 未 找到 ， 同 时 也 不 执行 步骤 〈6) 开始 的 交互 过 程 。 
(4) 浏览 器 : 解析 index.html 网 页 ， 请 求 页 面 上 所 有 资源 文件 。 

(5) 服务 器 : 返回 所 有 资源 文件 。 
(6) 浏览 器 :处理 manifest 文件 ， 请 求 manifest 中 所 有 要 求 本 地 缓存 的 文件 ， 包 括 index.html 页 
， 即 使 刚才 已 经 请 求 过 该 文件 。 如 果 要 求 本 地 缓存 所 有 文件 ， 这 将 是 一 个 比较 大 的 重复 的 请 求 过 程 。 

(7) 服务 器 : 返回 所 有 要 求 本 地 缓存 的 文件 。 

(8) 浏 览 器 :触发 downloading 事件 ,然后 开始 下 载 这 些 资源 ,在 下 载 的 同时 ,周期 性 地 触发 progress 
事件 ， 开 发 人 员 可 以 用 编程 的 手段 获取 多 少 文件 已 被 下 载 ， 多 少 文件 仍然 处 于 下 载 队 列 中 等 信息 。 

(9) 下 载 结束 后 触发 cached 事件 ， 表 示 首 次 缓存 成 功 ， 存 入 所 有 要 求 本 地 缓存 的 资源 文件 。 
再 次 访问 http:Wlocalhost:82/mr/ 网 站 ， 步 骤 (1) 一 (5) 同上， 在 步骤 (5) 执行 完 之 后 ， 浏 览 器 将 
核对 manifest 文件 是 否 被 更 新 ， 若 没有 被 更 新 ， 触 发 noupdate 事件 ， 步 又 (6) 开始 的 交互 过 程 不 会 被 
执行 。 如 果 被 更 新 了 , 将 继续 执行 后 面 的 步骤 , 在 步骤 (9) 中 不 触发 cached 事件 , 而 是 触发 updateReady 
事件 ， 这 表示 下 载 结束 ， 可 以 通过 刷新 页 面 来 使 用 更 新 后 的 本 地 缓存 ， 或 调用 swapCache 方法 来 立刻 
使 用 更 新 后 的 本 地 缓存 。 
另外 , 在 访问 缓存 名 单 时 如 果 返 回 一 个 HTTP 404 错误 页面 未 找到 ) 或 者 410 错误 〈 永 久 消 失 ) ， 
则 触发 obsolete 事件 。 

在 整个 过 程 中 ， 如 果 任何 与 本 地 缓存 有 关 的 处 理 中 发 生 错误 的 话 ， 都 会 触发 error 事件 。 可 能 会 触 
发 error 事件 的 情况 分 为 以 下 几 种 。 

回 ”缓存 名 单 返回 一 个 HTTP 404 错误 〈 页 面 未 找到 ) 或 者 410 错误 〈 永 久 消 失 )。 

缓存 名 单 被 找到 且 没 有 更 改 ， 但 引用 缓存 名 单 的 HTML 页 面 不 能 正确 下 载 。 

回 ”缓存 名 单 被 找到 且 被 更 改 ， 但 浏览 器 不 能 下 载 某 个 缓存 名 单 中 列 出 的 资源 。 

开始 更 新 本 地 缓存 时 ， 缓 存 名单 再 次 被 更 改 。 

例 19.2 为 了 说 明 这 个 事件 流程 ， 在 下 面 的 代码 中 ， 将 浏览 器 与 服务 器 在 交互 过 程 中 所 触发 的 一 
系列 事件 用 文字 的 形式 显示 在 页 面 上 ， 从 这 个 页 面 中 可 以 看 出 这 些 事 件 发 生 的 先后 顺序 。 其 主要 代码 
如 下 所 示 。〔 实 例 位 置 : 光盘 \TMNsN19\2) 

<IDOCTYPE HTML> 

<html manifest="applicationCacheEvent.manifest"> 

<head> 

<meta charset="UTF-8"> 

<title>applicationCache 事件 流程 示例 </title> 


<script> 
function drow() 


加 


var msg=document.getElementByld("mr ); 

applicationCache.addEventListener("checking", function() { 
mr.innerHTML+="checking<br/>"; 

}, true); 

applicationCache.addEventListener("noupdate", function() { 


377 


HTML 5 从 入 门 到 精通 


mr.innerHTML+="noupdate<br/>"; 
}, true); 
applicationCache.addEventListener("downloading", function() { 
mr.innerHTML+="downloading<br/>"; 
}, true); 
applicationCache.addEventListener("progress", function() { 
mr.innerHTML+="progress<br/>"; 
}, true); 
applicationCache.addEventListener("updateready", function() { 
mr.innerHTML+="updateready<br/>"; 
}, true); 
applicationCache.addEventListener("cached", function() { 
mr.innerHTML+="cached<br/>"; 
}, true); 
applicationCache.addEventListener("error", function() { 
mr.innerHTML+="error<br/>"; 
}, true); 
b 
</script> 
</head> 
<body onload="drow()"> 
<h1>applicationCache 事件 流程 示例 </h1> 
<p id="mr"></p> 
</body> 
</html> 


这 段 代 码 运行 结果 分 为 以 下 3 种 情况 。 
在 Opera 10 浏览 器 中 首次 打开 网 页 时 的 页 面 如 图 19.3 所 示 。 


Gpom 


日 applicationCache 事 件 - > 
39 0 ® Rs 1921681968 内 -| ac © 


applicationCache 事 件 流程 示例 


checking 
downloading 


19.3 ”applicationCache 事件 流程 (首次 打开 页 面 时 》 
在 Opera 10 浏览 器 中 再 次 打开 网 页 ( 且 manifest 文件 没有 更 新 ) 时 的 页 面 如 图 19.4 所 示 。 


© 3 DO |® me |192168.196.82/m/1|| PD | sccc 


applicationCache 事 件 流程 示例 


图 19.4 applicationCache 事件 流程 (再 次 打开 网 页 且 manifest 文件 没有 更 新 ) 


第 19 章 离线 应 用 程序 


如 图 19.5 所 示 。 


“DO 0 | 加 Bs [192168.19687/m/t||D -| Gee D 


applicationCache 事 件 流程 示例 


图 19.5 applicationCache 事件 流程 (再 次 打开 网 页 且 manifest 文件 已 被 更 新 ) 


19.5 小 结 


以 前 , 当 用 户 没 有 连接 到 Internet 时 , Web 站 点 往往 无 法 工作 。 如今 浏览 器 已 经 开始 支持 离线 操作 ， 
本 章 以 实例 的 形式 展示 了 如 何 让 Web 应 用 程序 在 没有 Web 的 时 候 也 能 工作 。 读 者 通过 本 章 的 学 习 能 详 
细 地 了 解 离线 的 应 用 


19.6 习 题 
选择 题 
1， 在 manifest 文件 中 ， 第 一 行 必须 是 〈 
A. 空 的 B. CACHE C. NETWORK D. CACHE MANIFEST 


2. 在 HTML 5 中 规定 manifest 文 件 的 MIME 类 型 是 (  )。 
A. text/cache-text B. text/cache-manifest C. text/cache-types ”D. 以 上 都 可 以 

3. 在 manifest 文件 中 ,可 以 加 上 注释 来 进行 一 些 必要 的 说 明 或 解释 ,注释 行 以 ( ) 文字 开头 。 
A.# B. * C. / D. 以 上 都 不 是 

4. 在 (  ) 类 别 中 指定 需要 被 缓存 在 本 地 的 资源 文件 。 
A. NETWORK B. CACHE C. CACHE MANIFEST DD. FALLBACK 


判断 题 


5. 可 以 为 每 一 个 页 面 单独 指定 一 个 manifest 文件 ， 也 可 以 对 整个 Web 应 用 程序 指定 一 个 总 的 
manifest 文件 。( ) 
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PANE 


使 用 Web Worker 处 理 线 程 


( 名 教学 录像 ，25 分 钟 ) 


可 以 使 用 Web Worker 来 实现 Web 平台 上 的 多 线程 处 理 功能 。 通 过 Web 
Worker， 可 以 创建 一 个 不 影响 前 台 处 理 的 后 台 线 程 ， 并 且 在 这 个 后 台 线 程 中 创建 
多 个 子 线程 。 通 过 Web Worker， 可 以 将 耗 时 较 长 的 处 理 交 给 后 台 线 程 去 运行 ， 从 
而 解决 了 HTML5 之 前 因为 基 个 处 理 耗 时 过 长 而 跳出 一 个 提升 用 户 脚 本 运行 时 间 
过 长 ， 导 致 用 户 不 得 不 结束 这 个 处 理 的 柳 栓 状况 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


MW 掌握 Web Worker 的 基本 知识 
mH ”掌握 使 用 Web Worker 在 Web 网 站 创建 一 个 后 台 线 程 


NM 了 解 多 个 JavaScript 文件 的 加 载 与 执行 
WI 掌握 线程 嵌 套 
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20.1 Web Worker 概述 


区 1 教学 录像 : 光盘 \TMNIx\20\WWeb Worker 概述 .exe 


20.1.1 创建 和 使 用 Worker 


Web Worker 是 在 HTML 5 中 新 增 的 ， 用 来 在 Web 应 用 程序 中 实现 后 台 处 理 的 一 项 技术 。 使 用 这 
个 API， 用 户 可 以 很 容易 地 创建 在 后 台 运行 的 线程 (在 HTML 5 中 称 为 worker) ， 如 果 将 可 能 耗费 较 
长 时 间 的 处 理 交 给 后 台 去 执行 ， 对 用 户 在 前 台 页 面 中 执行 的 操作 就 完全 没有 影响 了 。 

创建 后 台 线程 的 步骤 很 简单 。 只 要 在 Worker 类 的 构造 器 中 , 将 需要 在 后 台 线 程 中 执行 的 脚本 文件 
的 URL 作为 参数 ， 然 后 创建 Worker 对 象 就 可 以 了 ， 代 码 如 下 所 示 。 


var worker = new Worker("worker.js"); 


和 6 注意 在 后 名 线程 中 是 不 能 访问 页 面 或 窗口 对 象 的 。 如 果 在 后 台 线程 的 及 本 文件 中 使 用 到 
window 对 象 或 document 对 象 ， 则 会 引起 错误 的 发 生 。 


另外 ， 可 以 通过 发 送 和 接收 消息 来 与 后 台 线程 互相 传递 数据 。 通 过 对 Worker 对 象 的 onmessage 事 
件 句 柄 的 获取 可 以 在 后 台 线程 之 中 接收 消息 ， 使 用 方法 如 下 。 


worker. onmessage=function(event) 


{ 
// 处 理 接收 的 消息 。 
}, false); 


使 用 Worker 对 象 的 postMessage0 方 法 来 对 后 台 线 
程 发 送 消 息 ， 发 送 的 消息 是 文本 数据 ， 但 也 可 以 是 任何 
JavaScript 对 象 (需要 通过 JSON 对 象 的 stringify0 方 法 将 
其 转换 成 文本 数据 ) 。Worker 对 象 的 postMessage() 使 用 
方法 如 下 。 

worker.postMessage(message); 

另外 ， 同 样 可 以 通过 获取 Worker 对 象 的 onmessage V dnb 
事件 句柄 及 postMessage() 方 法 ， 在 后 台 线 程 内 部 进行 消 


Weork. onmessage 
进行 相关 处 理 
息 的 接收 和 发 送 。 


Web Worker 简单 的 操作 流程 如 图 20.1 所 示 。 图 20.1 Web Worker 简单 的 操作 流程 


worker. one 
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1.2 Web Worker 应 用 实例 一 一 求 和 运算 


例 20.1 来 看 一 个 使 用 后 台 线程 的 实例 。 在 该 实例 中 ， 放 置 了 两 个 文本 框 即 初始 文本 框 与 终 


极 文 本 框 ， 当 用 户 在 这 两 个 文本 框 中 输入 数字 ， 然 后 单 击 “ 计 算 ” 按 钮 时 ， 在 后 台 将 计算 从 初始 文本 
框 中 输入 的 值 到 终极 文本 框 中 输入 的 值 之 间 的 所 有 数值 的 求 和 运算 。 假 如 在 初始 文本 框 中 输入 数字 2， 
在 终极 文本 框 中 输入 数字 4， 则 执行 的 运算 就 是 2+3+4。 当 在 初始 文本 框 中 输入 的 值 大 于 终极 文本 框 中 
的 值 ， 则 弹出 “提交 的 运算 不 符合 要 求 ”的 提示 。 《实例 位 置 ， 光盘 \TMNsI\20\1) 


本 例 实 现 的 具体 过 程 如 下 。 
(1) 该 实例 中 的 HTML 代码 如 下 所 示 。 


< html> 

<head> 

</head> 

<body> 

<h1> 对 给 定 2 个 数字 之 间 所 有 数值 的 计算 </h1> 
<hr color="#FF0000"><br> 

初始 数值 :<input type="text1" id="num1"><br><br> 
终极 数值 :<input type="text" id="num"><br><br> 
<button onclick="kwb()"> 计 算 </button> 

</body> 


上 述 代码 主要 实现 ; 在 该 页 面 中 添加 了 两 个 文本 框 用 于 输出 要 计算 的 数字 ， 以 及 一 个 “计算 ” 按 


钮 ， 并 为 “计算 ”按钮 添加 onclick 事件 ， 当 单 击 “ 计 算 ” 按 钮 时 ， 将 触发 该 事件 ， 同 时 调用 自 定义 kwb 
函数 。 
(2) 创建 后 台 线程 ， 实 现 的 代码 如 下 所 示 。 
var worker = new Worker("kwb.js"); 
(3) 通过 Worker 对 象 的 onmessage 事件 句柄 来 获取 在 后 台 线 程 之 中 接收 信息 并 输出 ， 实 现 的 代 
码 如 下 所 示 。 


worker.onmessage = function(event) 


/消息 文本 放置 在 data 属性 中 ， 可 以 是 任何 JavaScript 对 象 
alert(" 合 计 值 为 " + event.data + "。"); 


上 
(4) 调用 kwb 函数 ， 首 先 在 该 函数 中 对 两 个 文本 框 中 输入 的 值 进行 解析 ， 以 保证 从 文本 框 输入 到 


后 台 线 程 的 值 是 数字 ， 如 果 输 入 的 数据 是 非 数字 ， 单 击 “ 计 算 ” 按 钮 ， 显 示 的 运算 结果 为 0。 然 后 判断 
输入 初始 文本 框 中 的 值 是 否 小 于 输入 终极 文本 框 中 的 值 ， 如 果 输 入 初始 文本 框 中 的 值 大 于 输入 终极 文 
本 框 中 的 值 ， 将 弹出 “提交 的 运算 不 符合 要 求 ”提示 框 ， 警 告 最 后 使 用 Worker 对 象 的 postMessage 方 
法 来 对 后 台 线 程 发 送信 息 ， 实 现 的 代码 如 下 所 示 。 


382 


function kwb() 


第 20 章 使 用 Web Worker 处 理 线程 


1/ 获取 文本 框 的 值 
var num1 = parselnt(document.getElementByld("num1").value); 
var num = parselnt(document.getElementByld("num").value); 
// 对 两 个 文本 框 提 交 的 值 进行 判断 
if(num<num1X{ 
alert(' 提 交 的 运算 不 符合 要 求 '); 


return false; 


} 

// 将 获取 的 文本 框 的 值 用 @ 拼 接 成 字符 串 
var subs=num1+'@'+numi 

// 将 数值 传 给 线程 
worker.postMessage(subs); 


} 


(5) 把 对 于 给 定 两 个 值 之 间 的 求 和 运算 的 处 理 放 到 线程 中 单独 执行 ,并 且 把 线程 代码 单独 书写 在 
kwb.js 脚本 文件 中 ， 实 现 的 代码 如 下 所 示 。 


onmessage = function(event){ 
var num = event.data; 


var intarray=num.split('@'); /| 返回 字符 串 中 数字 分 隔 符 为 @ 
var result = 0; 

for (var i = parselnt(intarray[0]); i <= intarray[1]; i++) { /| 执行 求 和 运算 

result +=i; 
postMessage( result); // 返 回 运算 结果 拼接 成 的 字符 串 


} 
本 实例 的 运行 效果 如 图 20.2 所 示 。 


apyepseywwhmy 二 - C |] 二- Sco 记 | 会 加 


对 给 定 2 个 数字 之 间 所 有 数值 的 计算 


L nd 
图 20.2 应 用 Web Worker 实现 的 求 和 运算 


20.2 在 Worker 内 部 能 做 什么 


首先 来 总 体 看 一 下 在 线程 中 应 用 的 JavaScript 脚本 文件 中 所 有 可 用 的 变量 、 函 数 与 类 , 具体 内 容 如 
下 所 示 。 


self: self 关键 词 用 来 表示 本 线程 范围 内 的 作用 域 。 
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加 ”postMessage(message): 向 创建 线程 的 源 窗口 发 送 消息 。 

onmessage: 获取 接收 消息 的 事件 句柄 。 

加 importScripts(urls): 导入 其 他 JavaScript 脚本 文件 。 参 数 为 该 脚本 文件 的 URL 地 址 , 可 以 导入 
多 个 脚本 文件 ， 如 下 所 示 。 


importScripts('script1.js','scripts\script2.js','scripts\script3.js'); 


CE 


办 


navigator 对 象 : 与 window.navigator 对 象 类 似 , 具有 appName、 platform、 userAgent、 appVersion 
等 属性 。 

sessionStorage、localStorage: 可 以 在 线程 中 使 用 Web Storage。 

XMLHttpRequest: 可 以 在 线程 中 处 理 Ajax 请 求 。 

Web Workers: 可 以 在 线程 中 婴 套 线程 。 

setTimeout、setInterval: 可 以 在 线程 中 实现 定时 处 理 。 

close: 结束 本 线程 。 

eval、isNaN、escape 等 : 可 以 使 用 所 有 JavaScript 核心 函数 。 

object: 可 以 创建 和 使 用 本 地 对 象 。 

WebSockets: 可 以 使 用 WebSockets API 来 向 服务 器 发 送 和 接收 信息 。 


办 办 办 办 多 办 欠 凶 


20.3 多 个 JavaScript 文 件 的 加 载 与 执行 


对 于 由 多 个 JavaScript 文件 组 成 的 应 用 程序 来 说 ， 可 以 通过 包含 script 元 素 的 方式 ， 在 页 面 加 载 的 
时 候 同步 加 载 JavaScript 文件 。 然 而 , 由 于 Web Worker 没有 访问 document 对 象 的 权限 , 所 以 在 Worker 
中 必须 使 用 另外 一 种 方法 导入 其 他 的 JavaScript 文件 一 一 importScripts， 该 方法 的 使 用 方法 如 下 所 示 。 
importScripts("mr.js"); 
导入 的 JavaScript 文件 只 会 在 某 一 个 已 有 的 Worker 中 加 载 和 执行 。 多 个 脚本 的 导入 同样 也 可 以 使 
importScripts 方法 ， 它 们 会 按 顺 序 执行 ， 代 码 如 下 所 示 。 


importScripts("mr.js","mrsoft.js"); 


20.4 线程 说 套 


喜 4 教学 录像 : 光盘 \TM\Ix\20\ 线 程 庶 套 .exe 
线程 中 可 以 嵌 套 子 线程 ， 这 样 可 以 把 一 个 较 大 的 后 台 线 程 切 分 成 几 个 子 线程 ， 在 每 个 子 线程 中 各 
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自 完成 相对 独立 的 一 部 分 工作 。 


20.4.1 单 层 嵌 套 
例 20.2 下面 通过 一 个 实例 来 演示 单 层 嵌 套 。 在 该 实例 
随机 数组 的 工作 也 放 到 后 台 线 程 中 ， 然 后 使 用 一 个 子 线程 在 


后 ， 在 一 个 表格 中 输出 可 以 被 5 整除 的 数字 ， 并 且 把 输出 既 
同时 本 实例 中 对 于 数组 的 传递 以 及 挑选 结果 的 传递 均 采 


在 表格 中 进行 描 红 处 理 。 
转换 ， 以 验证 是 否 能 在 线程 之 间 进 行 JavaScript 对 象 的 传递 工作 。 


本 实例 的 具体 实现 步骤 如 下 所 示 。 


(1) 在 


HTML 5 页 


<IDOCTYPE html> 


<head> 


<meta charset="UTF-8"> 

<script type="text/javascript"> 

var worker = new Worker("script.js"); 
worker.postMessage(""); 
worker.onmessage = function(event) { 


{ 


varj; 
Var k; 
var tr; 
var td; 
var intArray=event.data.split(";"); 
var table=document.getElementByld("table"); 
for(var i=0;i<intArray.length;i++) 
{ 
j=parselnt(i/10,0); 
k=i%10; 
if(k==0) 
tr=document.createElement("tr"); 
tr.id="tr"+j; 
tr.style.backgroundColor="orange"; 
table.appendChild(tr); 
) 


else 


{ 
tr=document.getElementByld("tr"+j); 


td=document.createElement("td"); 
tr.appendChild(td); 
td.innerHTML=intArray[j*10+k]; 
if((intArray[j*10+k])%2==0){ 


中 随机 生成 了 一 个 整数 的 数组 ， 并 把 生成 
随机 数组 中 挑选 可 以 被 5 整除 的 数字 。 最 
能 被 5 整除 又 能 被 2 整除 的 数字 的 单元 格 
JSON 对 象 来 进行 
(实例 位 置 光盘 \TM\sI202) 


中 将 符合 要 求 的 数字 以 表格 的 形式 进行 输出 ， 具 体 代 码 如 下 所 示 。 


/从 线程 中 取得 计算 结果 


// 行 号 
// 列 号 


// 该 行 不 存在 
/添加 行 


/该 行 已 存在 


/添加 列 


/设置 该 列 内 容 
/如 果 所 选 的 整数 既 能 被 5 整除 又 能 被 2 整除 
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td.style.backgroundColor="red"; // 输 出 该 整数 的 列 背景 色 为 红色 
y 
td.style.color="black "; 1/ 设置 该 列 字体 颜色 
td.width="30"; 1/ 设置 列 宽 
: 
} 
上 
</script> 
</head> 
<body> 


<h1> 从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 </h1> 
<table id="table"> 
</table> 
</body> 
(2) 后 台 线 程 的 主线 程 代码 部 分 。 在 主线 程 中 随机 生成 100 个 整数 构成 的 数组 ， 然 后 把 这 个 数组 
提交 到 子 线程 ， 在 子 线程 中 把 可 以 被 5 整除 的 数字 挑选 出 来 ， 然 后 送 回 主线 程 ， 主 线程 再 把 挑选 结果 
送 回 页 面 进行 显示 。 其 实现 的 scriptjs 代码 如 下 所 示 。 


onmessage=function(event}{ 


var intArray=new Array(100); // 随 机 数组 

for(var i=0;i<100;i++) /| 生成 100 个 随机 数 

intArray[i]=parselnt(Math.random()*100); 
var worker; 
worker=new Worker("worker.js"); // 创 建 子 线程 
worker.postMessage(JSON.stringify(intArray)); // 把 随机 数组 提交 给 子 线程 进行 挑选 工作 
worker.onmessage = function(event) { 

postMessage(event.data); // 把 挑选 结果 返回 主页 面 

3 


| 


(3) 子 线程 部 分 的 代码 。 子 线程 在 接收 到 的 随机 数组 中 挑选 能 被 5 整除 的 数字 ， 然 后 拼接 成 字符 
串 并 返回 。 其 实现 workerjs 的 主要 代码 如 下 。 


onmessage = function(event) { 
var intArray= JSON.parse(event.data); // 还 原 整数 数组 
var returnStr; 
returnStr="™"; 
for(var i=0;i<intArray.length;i++) 


if(parselnt(intArray[i])%5==0) // 能 否 被 5 整除 
{ 


if(returnStr!="") 
returnStr+=";"; 


returnStr+=intArray[i]; // 将 能 被 5 整除 的 数字 拼接 成 字符 串 
} 
postMessage(returnStr); // 返 回 拼接 字符 串 
close(); /关闭 子 线程 
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本 例 运 行 的 效果 如 图 20.3 所 示 。 
[IE 


由 Deewomeesewv-aozozzrznn[| 


从 随机 生成 的 数字 中 抽取 5 的 


倍数 并 显示 示例 
EE EN | 
| | 


图 20.3 ”使 用 线程 的 单 层 嵌 套 的 实例 


20.4.2 ”在 多 个 子 线 程 中 进行 数据 的 交互 


本 节 主 要 介绍 当主 线程 使 用 到 多 个 子 线程 时 ， 多 个 子 线程 之 间 如 何 实现 数据 的 交互 ， 大 致 需 要 如 


下 几 个 步骤 。 
(1) 先 创建 发 送 数据 的 子 线程 。 
(2) 执行 子 线程 中 的 任务 ， 然 后 把 要 传递 的 数据 发 送 给 主线 程 。 


(3) 在 主线 程 接收 到 子 线程 传 回来 的 消息 时 ， 创 建 接收 数据 的 子 线程 ， 然 后 把 发 送 数据 的 子 线程 


中 返回 的 消息 传递 给 接收 数据 的 子 线程 。 
(4) 执行 接收 数据 子 线程 中 的 代码 。 


例 20.3 下 面 是 一 个 在 多 个 子 线程 中 进行 数据 交互 的 实例 ， 本 例 与 例 20.2 中 实现 的 效果 相同 ， 同 
样 是 随机 生成 了 一 个 整数 的 数组 ， 把 数组 中 能 被 5 整除 的 数字 以 表格 形式 输出 ， 并 且 把 输出 既 能 被 5 
整除 也 能 被 2 整除 的 数字 的 单元 格 进行 描 红 处 理 。〔 实 例 位 置 ， 光盘 \TMIsN20\3) 


本 例 实 现 的 主要 步骤 如 下 所 示 。 


(1) 将 创建 随机 数组 的 工作 放 到 一 个 单独 的 子 线程 〈 发 送 数据 子 线程 ) 中 ， 在 该 线程 


数组 ， 实 现 workerl,js 文件 的 主要 代码 如 下 所 示 。 


onmessage = function(event) { 
var intArray=new Array(100); /随机 数组 
for(var i=0;i<100;i++) 

intArray[i]j=parseInt(Math.random()*100); 
postMessage(JSON.stringify(intArray)); /发 送 回 随机 数组 
close(); /关闭 子 线程 
} 


(2) 创建 本 例 的 主要 线程 〈 主 线程 ) ， 在 主线 程 接收 到 子 线程 返回 


代码 如 下 所 示 。 


onmessage=function(event){ 


hb 创建 随机 


来 的 消息 时 ， 创 建 接收 数据 的 
子 线程 ， 然 后 把 发 送 数据 的 子 线程 中 返回 的 消息 传递 给 接收 数据 的 子 线程 ， 主 线程 scriptjs 文件 的 主要 
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var worker; 

worker=new Worker("worker1.js"); /| 创建 发 送 数 据 的 子 线程 
worker.postMessage("™"); 

worker.onmessage = function(event) { 


var data=event.data; /接收 子 线程 中 数据 ， 本 实例 中 为 创建 好 的 随机 数组 
worker=new Worker("worker2.js"); /| 创建 接收 数据 子 线程 
worker.postMessage(data); // 把 从 发 送 数据 子 线程 中 发 回 消息 传递 给 接收 数据 的 子 线程 
worker.onmessage = function(event) { 

var data=event.data; /获取 接收 数据 子 线程 中 传 回 数据 ， 本 实例 中 为 挑选 结果 
postMessage(data); // 把 挑选 结果 发 送 回 主页 面 

上 

} 


| 
(3) 再 创建 一 个 子 线程 〈 接 收 数据 的 子 线程 ) ， 在 该 线程 中 进行 能 够 被 5 整除 的 数字 挑选 工作 ， 


最 后 把 挑选 结果 传递 回 主页 面 进行 显示 。 实 现 该 线程 worker2js 文件 的 主要 代码 如 下 所 示 。 
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onmessage = function(event) { 
var intArray= JSON.parse(event.data); // 还 原 整数 数组 
var returnStr; 
returnStr="™; 
for(var i=0,i<intArray.length;i++) 


if(parselnt(intArray[i])%5==0) // 能 否 被 5 整除 
{ 


if(returnStr!="") 
returnStr+=","; 


returnStr+=intArray[j]; /将 能 被 5 整除 的 数字 拼接 成 字符 串 
外 
} 

postMessage(returnStr); /| 返回 拼接 字符 串 

close(); /关闭 子 线程 
员 

(4) 在 主页 面 中 将 挑选 的 结果 以 表格 的 形式 显示 在 页 面 中 ， 其 实现 的 代码 如 下 所 示 。 

<!DOCTYPE html> 
<head> 


<meta charset="UTF-8"> 

<script type="text/javascript"> 

var worker = new Worker("script.js"); 
worker.postMessage(""); 


worker.onmessage = function(event) { /从 线程 中 取得 计算 结果 
iffevent.datal="”" 
{ 
varj; // 行 号 
var ki; // 列 号 
var tr; 
var td; 


var intArray=event.data.split(™,"); 
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var table=document.getElementByld("table"); 
for(var i=0;i<intArray.length;i++) 


{ 
j=parselnt(i/10,0); 
k=i%10; 
if(k==0) /该 行 不 存在 
中 
tr=document.createElement("tr"); /添加 行 
tr.id="tr"+j; 
tr.style.backgroundColor="orange"; 
table.appendChild(tr); 
} 
else // 该 行 已 存在 
tr=document.getElementByld("tr"+j); 
td=document.createElement("td"); // 添 加 列 
tr.appendChild(td); 
td.innerHTML=intArray[j*10+k]; // 设 置 该 列 内 容 
if((intArray[j*10+k])%2==0X{ // 如 果 所 选 的 整数 既 能 被 5 整除 又 能 被 2 整除 
td.style.backgroundColor="red"; // 输 出 该 整数 的 列 背 景色 为 红色 
td.style.color="black "; // 设 置 该 列 字体 颜 色 
td.width="30"; // 设 置 列 宽 
} 
} 
» 
</script> 
</head> 
<body> 


<h1> 从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 </h1> 
<table id="table"> 

</table> 

</body> 


本 实例 的 运行 效果 如 图 20.4 所 示 。 


/3 | D0D Oferpse 人 六-.C| 汪 


从 随机 生成 的 数字 中 抽取 5 的 


倍数 并 显示 示例 


图 20.4 ”使 用 多 线程 进行 数据 的 交互 示例 
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20.5 小 结 


本 章 主要 讲解 了 如 何 使 用 Web Worker 搭建 具有 后 台 处 理 能 力 的 Web 应 用 程序 首先 ,介绍 了 Web 
Worker 的 工作 机 制 , 然后 介绍 了 如 何 使 用 API 创建 Worker， 以 及 如 何 实现 多 个 子 线程 之 间 的 交互 。 本 
章 主要 是 以 实例 的 形式 阐述 了 Web Worker 的 工作 原理 ， 希 望 读者 能 细 细 地 揣摩 ， 争 取 做 到 举一反三 ， 
开发 出 更 多 的 Web 应 用 程序 。 


20.6 习 题 
选择 题 
1. 在 后 台 线程 的 脚本 文件 中 使 用 到 ( ) 对 象 或 ( ) 对 象 ， 会 引起 错误 的 发 生 。 
A. worker、 onmessage B. alert、 onclick 
C. window、 document D. 以 上 都 可 以 
2. 通过 对 worker 对 象 的 〈 ) 事件 句柄 的 获取 可 以 在 后 台 线 程 之 中 接收 消息 。 
A. postMessage B. onmessage C. stringify D. 以 上 都 可 以 
3. 可 以 导入 多 个 脚本 文件 的 函数 是 站 
A. importScripts B. stringify C. postMessage D. 以 上 都 不 是 
4. 可 以 在 线程 中 处 理 Ajax 的 函数 是 〈 六 
A. eval B. XMLHttpRequest 
C. setTimeout D. setInterval 
判断 题 
5. 在 后 台 线 程 中 是 不 能 访问 页 面 或 窗口 对 象 的 。( ) 
填空 题 
6. 可 以 通过 和 消息 来 与 后 台 线程 互相 传递 数据 。 
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通信 API 
( 铝 + 教学 录像 : 4 分钟 ) 


WebSockets 是 HTML 5 中 最 强大 的 通信 功能 , 它 定 义 了 一 个 爹 双 工 通信 信道 ， 
仅 通 过 Web 上 的 一 个 Socket 即 可 进行 通信 。WebSockets 不 仅仅 是 对 常规 HTTP 
通信 的 另 一 种 增 量 加 强 ， 更 代表 着 一 次 巨大 的 进步 ， 对 实时 的 、 事 件 驱 动 的 Web 
应 用 程序 而 言 更 是 如 此 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


MH 掌握 跨 文档 消息 传输 的 基本 概念 
由” 掌 栓 怎 样 实现 不 同 页 面 、 不 同 端口 、 不 同城 之 间 的 消息 传递 
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21.1 跨 文档 消息 通信 


句 4 教学 录像 : 光盘 \TM\Ix\21\ 跨 文档 消息 通信 .exe 

首先 介绍 Messaging API， 因 为 Web Worker 和 Web Sockets 都 使 用 这 一 共同 的 通信 方法 ， 所 以 将 
此 作为 通信 的 基本 知识 。 

HTML 5 提供 了 在 网 页 文档 之 间 互 相 接 收 与 发 送信 息 的 功能 。 使 用 这 个 功能 ， 只 要 获取 到 网 页 所 
在 窗口 对 象 的 实例 ， 不 仅 同 源 〈 域 + 端口 号 ) 的 Web 网 页 之 间 可 以 互相 通信 ， 甚 至 可 以 实现 跨 域 通信 。 


21.1.1 ”使 用 postMessageAPI 


首先 ， 要 想 接收 从 其 他 的 窗口 发 过 来 的 消息 ， 就 必须 对 窗口 对 象 的 message 事件 进行 监视 ， 代 码 
如 下 所 示 。 

window.addEventListener("message",function(){.…},false); 

使 用 window 对 象 的 postMessage 方法 向 其 他 窗口 发 送 消息 ， 该 方法 的 定义 如 下 所 示 。 

otherWindow.postMessage(message,targetOrigin); 

该 方法 使 用 两 个 参数 ， 第 一 个 参数 为 所 发 送 的 消息 文本 ， 但 也 可 以 是 任何 JavaScript 对 象 ( 通 过 
JSON 转换 对 象 为 文本 ) ; 第 二 个 参数 为 接收 信息 的 对 象 窗口 的 URL 地 址 (如 http://localhost:8080/》。 
可 以 在 URL 地 址 字符 串 中 使 用 通配符 “*” 指 定 全 部 地 址 ,不 过 ,建议 使 用 准确 的 URL 地 址 。otherWindow 
为 要 发 送 窗口 对 象 的 引用 ， 可 以 通过 window.open 返回 该 对 象 ， 或 通过 对 window.iframes 数组 指定 序 
号 (index) 或 名 字 的 方式 来 返回 单个 这 ame 所 属 的 窗口 对 象 。 


21.1.2 ” 跨 文档 消息 传输 


例 21.1 为 了 更 好 地 理解 跨 文档 消息 传输 ， 下 面 编写 一 个 实例 ， 实 现 主页 面 与 子 页 面 中 框架 之 间 
的 相互 通信 。 其 基本 思路 是 : 首先， 创建 主页 面向 iframe 子 页 面 发 送 消息 ，iframe 子 页 面 接收 消息 ， 
显示 在 本 页 面 中 , 然后 向 主页 面 返回 消息 。 最后, 主页 面 接收 并 输出 消息 。( 实 例 位 置 : 光盘 \TMNsI21\1) 


鹅 0 注 意 要 完成 这 个 实例 ， 必 须 先 建立 两 个 虚拟 的 网 站 ， 将 主页 面 与 子 页 面 分 别 放置 于 不 同 的 网 
站 中 ， 才 能 够 达到 跨 域 通信 的 效果 。 


这 里 介绍 一 种 在 Apache 服务 器 下 创建 虚拟 主机 的 方法 , 并 且 将 主页 面 和 子 页 面 分 别 存储 于 这 两 个 
虚拟 主机 下 ， 以 此 完成 跨 域 通信 的 实例 。 
(1) 安装 配置 Apache 服务 器 (建议 采用 AppServ 集成 化 安装 包 来 搭建 一 个 PHP 的 开发 环境 ， 通 
过 其 中 的 Apache 服务 器 来 测试 程序 ) 。 
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(2) 定位 到 Apache2.2\conf\httpd.conf 文件 ， 打 开 该 文件 ， 并 在 最 后 的 位 置 添加 如 下 内 容 ， 完 成 虚 


E 机 的 配置 。 其 代码 如 下 所 示 。 


<VirtualHost *:80> 
ServerAdmin any@any.com 
DocumentRoot "F:\wamp\webpage\cxkfzyk\html" 
ServerName 192.168.1.59 
ErrorLog "logs/phpchina1.com-error.log" 
CustomLog "logs/phpchina1.com-access.log" common 
</VirtualHost> 


第 1 行 ， 定义 虚拟 服务 器 的 标签 ， 指 定 端口 号 。 

第 2 行 ， 指 定 一 个 邮箱 地 址 ， 可 以 随意 指定 。 

第 3 行 ， 定 义 要 访问 的 项 目 在 Apache 服务 器 中 的 具体 路 径 。 

第 4 行 ， 指 定 服务 器 的 访问 名 称 ， 即 与 项 目 绑 定 的 域名 。 

第 5、6 行 ， 定 义 Apache 中 日 志文 件 的 存储 位 置 。 

第 7 行 ， 定 义 虚拟 服务 器 的 结束 标签 。 

上 述 七 行 代码 即 可 完成 一 个 虚拟 服务 器 的 配置 操作 ， 如 果 存 在 多 个 域名 ， 并 且 需 要 绑 定 Apache 服 


务 器 下 的 多 个 项 目 ， 重 复 上 述 操作 ， 只 需 为 每 个 域名 绑 定 不 同 的 项 目 文件 即 可 。 即 修改 DocumentRoot 
和 ServerName 指定 的 值 。 


(3) 在 完成 虚拟 主机 的 配置 之 后 ， 需 要 保存 httpd.conf 文件 ， 重 新 启动 Apache 服务 器 。 
(4) 编写 实例 内 容 ， 首 先 创建 一 个 index.html 文件 。 其 代码 如 下 所 示 。 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 跨 域 通信 示例 </title> 
<script type="text/javascript"> 
// 监 听 message 事件 
window.addEventListener("message", function(ev) { 
// 忽 略 指定 URL 地 址 之 外 的 页 面 传 过 来 的 消息 
if(ev.origin != "http://192.168.1.189") { 
return; 


' 

// 显 示 消息 

alert(" 从 "+ev.origin + "那里 传 过 来 的 消息 :\n\”" + ev.data + "\"); 
}, false); 
function hello(){ 

var iframe = window.frames[0]; 

/传递 消息 

iframe.postMessage(" 您 好 ! " "http://192.168.1.189"); 


</script> 

</head> 

<body> 

<h1> 跨 域 通信 示例 </h1> 

<iframe width="400" src="http://192.168.1.189" onload="hello()"> 
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</iframe> 
</body> 
</html> 


将 其 存储 于 服务 器 的 访问 名 称 为 192.168.1.59 的 虚拟 主机 下 , 具体 位 置 由 DocumentRoot 的 值 决定 。 


(5) 在 全 为 192.168.1.189 的 主机 下 , 重新 创建 一 个 虚拟 主机 , 设置 其 服务 器 访问 地 址 为 192.168.1.189， 
将 子 页 面 2.html 存储 于 该 服务 器 指定 的 位 置 。 其 完整 代码 如 下 所 示 。 


<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<script type="text/javascript"> 
window.addEventListener("message", function(ev}{ 
if(ev.origin != "http://192.168.1.59"){ 
return; 
by 


document.body.innerHTML = "从 "+ev.origin + "那里 传 来 的 消息 。<br>\""+ ev.data + \""; 
// 向 主页 面 发 送 消息 
eV.source.postMessage(" 明 日 科技 欢迎 您 ! 这 里 是 " + this.location, ev.origin); 

}, false); 

</script> 

</head> 

<body></body> 

</html> 


(6) 至 此 ， 已 经 完成 虚拟 主机 的 配置 和 跨 域 通信 实例 内 容 的 创建 ， 下 面 则 可 以 通过 指定 的 浏览 器 
访问 主页 面 (http:/192.168.1.59/) ， 其 运行 效果 如 图 21.1 所 示 。 


[ET 和 


JoveSoript 


0 <192168159> 
A 从 httpy/192.168.1189 本 时 从 过 来 和 水 轩 : 
汉王 归 hespy/192158.1189/" 
] 个 上 换行 4 本 守 的 村 本 


图 21.1 跨 域 通信 实例 
21.2 小 结 


本 章 主要 讲解 了 如 何 使 用 postMessage 方法 来 实现 跨 文 档 的 消息 传输 。 使 用 跨 文档 消息 传输 功能 ， 
可 以 在 不 同 网 页 文档 、 不 同 端口 、 不 同 域 之 间 进行 消息 的 传递 。 
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pA 


获取 地 理 位 置信 息 


( 她 教学 录像 : 12 分 钟 ) 


通过 地 理 位 置 将 性 能 够 识别 出 每 个 人 所 在 的 具体 地 理 位 置 ， 并 且 在 允许 的 情况 
下 ， 把 位 置信 息 分 享 给 别人 。 识 别 地 理 位 置 的 方法 有 很 多 一 一 通过 IP 地 址 、 利 用 
基站 获取 手机 网 络 的 接 入 位 置 、 利 用 GPS 卫星 定位 获得 经 纬度 信息 等 。 
通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 


掌握 Geolocation API 的 基本 知识 
掌握 geolocation 属性 的 三 个 方法 
掌握 position 对 象 的 属性 的 设置 方法 


熟练 掌握 通过 getCurrentPosition 方法 来 获取 存放 在 position 对 象 内 的 当前 用 户 
的 地 理 位 置信 息 


熟悉 字符 吝 的 转 义 及 还 原 
掌握 在 页 面 上 使 用 Google 地 图 的 基本 方法 


在 页 面 上 正确 地 显示 Google 地 图 ， 并 且 把 用 户 当 前 所 在 的 地 理 位 置 在 地 图 上 正 
确 地 标注 出 来 


HTML 5 从 入 门 到 精通 


22.1 Geolocation API 的 概述 


苹 4 教学 录像 : 光盘 \TIM\Ix\22\Geolocation API 的 概述 .exe 
在 HTML 5 中 ， 为 window.navigator 对 象 新 增 了 一 个 geolocation 属性 ， 可 以 使 用 Geolocation API 
来 对 该 属性 进行 访问 。window.navigator 对 象 的 geolocation 属性 存在 以 下 三 个 方法 。 


22.1.1 使 用 getCurrentPosition 方法 获取 当前 地 理 位 置 


可 以 使 用 getCurrentPosition 方法 来 取得 用 户 当前 的 地 理 位 置信 息 ， 该 方法 的 定义 如 下 所 示 。 
void getCurrentPosition(onSuccess,onError,options); 


getCurrentPosition 方法 中 的 第 一 个 参数 为 获取 当前 地 理 位 置信 息 成 功 时 所 执行 的 回调 函数 。 该 参 
数 的 使 用 方法 如 下 所 示 。 

navigator.geolocation.getCurrentPosition(function(position)}{ 

1/ 获取 成 功 时 的 处 理 

} 


在 获取 地 理 位 置信 息 成 功 时 执行 的 回调 函数 中 , 用 到 了 一 个 参数 position, 它 代表 的 是 一 个 position 
对 象 ， 将 在 第 22.2 节 中 对 这 个 对 象 进行 具体 介绍 。 

getCurrentPosition 方法 中 的 第 二 个 参数 为 获取 当前 地 理 位 置信 息 失败 时 所 执行 的 回调 函数 。 如 果 
获取 地 理 位 置信 息 失败 ， 可 以 通过 该 回调 函数 把 错误 信息 提示 给 用 户 。 当 在 浏览 器 中 打开 使 用 了 
Geolocation API 来 获得 用 户 当前 位 置信 息 的 页 面 时 ， 浏 览 器 会 询问 用 户 是 否 共享 位 置信 息 ， 如 图 22.1 
所 示 。 


和 中 局 or | 时 本 地 | localhosyDVIh/ 学 习 资 PHTMUi | 用 -| 使 用 Googke 有 
里 ccaihon 拓 要 ?0 道 的 当前 位 置 在 此 有 站 i 记 信和 的 庄 皖 。 共 享 我 的 位 年， 拒 抬 
De Te 


22.1 在 Opera 10 浏览 器 中 询问 用 户 是 否 共享 位 置信 息 


如 果 在 该 画面 中 拒绝 共享 的 话 ， 也 会 引起 错误 的 发 生 。 
该 回调 函数 使 用 一 个 error 对 象 作为 参数 ， 该 对 象 具 有 以 下 两 个 属性 。 
回 code 属性 
code 属性 有 以 下 属性 值 。 
> PERMISSION_DENIED(1): 用 户 单 击 信息 条 上 的 “不 共享 ”按钮 或 者 直接 拒绝 被 获取 位 
置信 息 。 
> POSITION_UNAVAILABLE(2): 网 络 不 可 用 或 者 无 法 连接 到 获取 位 置信 息 的 卫星 。 
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> ”TIMEOUT(3): 网 络 可 用 但 在 计算 用 户 的 位 置 上 花费 了 过 长 时 间 。 
> UNKNOWN_ERROR(0): 发 生 了 其 他 未 知 错误 。 
加 ”message 属性 
message 属性 为 一 个 字符 串 , 在 该 字符 串 中 包含 了 错误 信息 , 这 个 错误 信息 在 开发 和 调试 时 将 很 有 
。 但 是 需要 注意 的 是 有 些 浏览 器 是 不 支持 message 属性 的 ， 如 Firefox 3.6 以 上 。 
在 getCurrentPosition 方法 中 使 用 第 二 个 参数 来 捕获 错误 信息 的 具体 方法 如 下 所 示 。 
navigator.geolocation.getCurrentPosition( 
function(position)}{ 


var coords = position.coords; 
showMap(coords.latitude,coords.longitude,coords.accuracy); 


» 
// 捕 获 错误 信息 
function(error){ 
var errorTypes ={ 
人 :位 置 服务 被 拒绝 
2:' 获 取 不 到 位 置信 息 '， 
3: 获 取信 息 超时 ' 


alert(errorTypes[error.code]+":, 不 能 确定 你 的 当前 地 理 位 置 "); 
} 

» 

getCurrentPosition 方法 中 的 第 三 个 参数 可 以 省 略 ， 它 是 一 些 可 选 属性 的 列表 ， 这 些 可 选 属性 如 下 。 

enableHighAccuracy (布尔 型 ， 默 认为 false) : 是 否 要 求 高 精度 的 地 理 位 置信 息 ， 在 很 多 设备 上 即 
使 设置 了 这 个 参数 也 不 会 起 作用 ， 因 为 设备 在 使 用 时 需要 结合 设备 电量 、 具 体 地 理 情况 来 考虑 。 因 此 ， 
多 数 情况 下 把 该 属性 设 为 默认 ， 由 设备 自身 来 调整 。 

timeout 〈 单 位 为 毫秒 ， 默 认 值 为 infinity/0) :对 地 理 位 置信 息 的 获取 操作 做 一 个 超时 限制 。 如 果 
在 该 时 间 内 未 获取 到 地 理 位 置信 息 ， 则 返回 错误 。 

maximumAge( 单 位 为 毫秒 , 默认 值 为 0) : 对 地 理 位 置信 息 进行 缓存 的 有 效 时 间 。 如 maximumAge: 
120000 (1 分 钟 是 60000) 。 如 果 在 11: 00 时 获取 过 一 次 地 理 位 置信 息 ， 在 11: 01 时 ， 再 次 调用 
navigator.geolocation.getCurrentPosition 重新 获取 地 理 位 置信 息 ， 则 返回 的 依然 为 11: 00 时 的 数据 ( 因 
为 设置 的 缓存 有 效 时间 为 2 分 钟 ) 。 超 过 这 个 时 间 后 缓存 的 地 理 位 置信 息 被 废弃 ， 尝 试 重新 获取 地 理 
位 置信 息 。 如 果 该 值 被 指定 为 0， 则 无 条 件 重新 获取 新 的 地 理 位 置信 息 。 

对 于 这 些 可 选 属性 的 具体 设置 方法 如 下 所 示 。 

navigator.geolocation.getCurrentPosition( 


function(position)X{ 
// 获 取 地 理 位 置信 息 成 功 时 所 做 的 处 理 


}» 
function(errorj{ 
/获取 地 理 位 置信 息 失 败 时 所 做 的 处 理 
/以 下 为 可 选 属性 
{ 
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/设置 缓存 有 效 时 间 为 2 分 钟 
maximumAge:60*1000*2， 

/5 秒 钟 内 获取 到 地 理 位 置信 息 则 返回 错误 
timeout:5000 


22.1.2 ”持续 监视 当前 地 理 位 置 的 信息 


使 


watchCurrentPosition 方法 来 持续 获取 用 户 的 当前 地 理 位 置信 息 ， 它 会 定期 地 自动 获取 ， 该 方 


法 定义 妇 


0 下 所 示 。 


int watchCurrentPosition(onSuccess,onError,options); 


该 方法 三 个 参数 的 说 明 与 使 用 方法 与 getCurrentPosition 方法 相同 。 该 方法 返回 一 个 数字 ， 这 个 数 


字 的 使 有 


方法 与 JavaScript 脚本 中 setInterval 方法 的 返回 参数 的 使 用 方法 类 似 ,可 以 被 clearWatch 方法 


使 用 ， 停 止 对 当前 地 理 位 置信 息 的 监视 。 


22.1.3 ”停止 获取 当前 用 户 的 地 理 位 置信 息 


使 


void 


该 方法 可 以 停止 对 当前 用 户 的 地 理 位 置信 息 的 监视 。 该 方法 定义 如 下 所 示 。 
clearWatch(watchld); 


该 方法 的 参数 为 调用 watchCurrentPosition 方法 监视 地 理 位 置信 息 时 的 返回 参数 。 


22.2 ”position 对 象 


如 果 获 取 地 理 位 置信 息 成 功 , 则 可 以 在 获取 成 功 后 的 回调 函数 中 通过 访问 position 对 象 的 属性 来 得 
到 这 些 地 理 位 置信 息 。position 对 象 具 有 如 下 属性 。 


网 加 网 网 罗网 网 网 


例 
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latitude: 当前 地 理 位 置 的 纬度 。 

longitude: 当前 地 理 位 置 的 经 度 。 

altitude: 当前 地 理 位 置 的 海拔 〈 不 能 获取 时 为 null)。 

accuracy: 获取 到 的 纬度 或 经 度 的 精度 (以 米 为 单位 )。 

altitudeAccurancy: 获取 到 的 海拔 的 精度 〈 以 米 为 单位 )。 

heading: 设备 的 前 进 方向 。 用 面 朝 正 北方 向 的 顺 时 针 旋 转角 度 来 表示 〈 不 能 获取 时 为 null)。 
speed: 设备 的 前 进 速度 〈 以 米 / 秒 为 单位 ， 不 能 获取 时 为 null)。 

timestamp: 获取 地 理 位 置信 息 时 的 时 间 。 

22.1 在 本 例 中 使 用 getCurrentPosition 方法 获取 当前 位 置 的 地 理 信 息 ， 并 且 在 页 面 中 显示 
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position 对 象 中 当前 地 理 位 置 的 纬度 和 经 度 。 (实例 位 置 : 光盘 \TMNsI22\1) 
其 实现 的 主要 代码 如 下 所 示 。 


<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 获 取 地 理 位 置 的 经 度 与 纬度 </title> 
</head> 
<body> 
<p id="geo_loc"><p> 
<script> 
function getElem(id) { 
return typeof id === 'string' ? document.getElementByld(id) : id; 
} 
function show_it(lat, lon) { 
var str = ' 您 当前 的 位 置 ， 纬 度 :' + lat + '， 经 度 :' + lon; 
getElem('geo_loc').innerHTML = str; 


if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition 
(function(position) { 
show _it(position.coords.latitude, position.coords.longitude); }, 
function(err) { 
getElem('geo_loc').innerHTML = err.code + "\n" + err.message; }); 
}else{ 
getElem('geo_loc').innerHTML = "您 当前 使 用 的 浏览 器 不 支持 Geolocation 服务 ";} 
</script> 
</body> 
</html> 


这 段 代 码 在 Opera 10 浏览 器 中 的 运行 效果 如 图 22.2 所 示 。 另 外 ， 同 一 段 代 码 在 不 同 设备 的 浏览 器 
上 的 运行 结果 也 各 不 相同 ， 其 结果 取决 于 运行 浏览 器 的 设备 。 


1 D oo | 是 3 好 |oclhot 果 | 二 -| FE 


您 当前 的 位 置 ， 纬 度 ，43. 817084， 经 度 ，125. 32353 


222 在 Opera 10 浏览 器 中 获取 地 理 位 置信 息 的 实 人 
22.3 在 Google 地 图 上 显示 “我 在 这 里 ” 


锅 4 教学 录像 : 光盘 \TM\Ix\22\ 在 Google 地 图 上 显示 “我 在 这 里 ”.exe 
例 22.2 ”通过 本 实例 来 看 一 下 如 何在 页 面 上 显示 一 幅 google 地 图 ， 并且 把 用 户 的 当前 地 理 位 置 标 
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注 在 地 图 上 面 。 如 果 用 户 的 位 置 发 生 改变 ， 将 把 之 前 在 地 图 上 的 标记 自动 更 新 到 新 的 位 置 上 。 实例 


位 置 光盘 \TMIsI\22\2) 


API 


400 


实现 的 具体 步骤 如 下 所 示 。 
(1) 要 在 页 面 中 使 用 Google 地 图 , 需要 使 用 到 Google Map API。 使 用 时 在 页 面 中 导入 Google Map 
的 脚本 文件 ， 导 入 方法 如 下 所 示 。 


<script type="text/javascript" src=http://maps.google.com/maps/api/js?sensor=false /> 
(2) 设 定 地 图 的 参数 ， 设 定 的 方法 如 下 所 示 。 
// 设 定 地 图 参数 ， 将 用 户 的 当前 位 置 的 纬度 、 经 度 设 定 为 地 图 的 中 心 点 。 


var lating = new google.maps.LatLng(coords.latitude, coords.longitude); 
var myOptions = { 
zoom: 14, 

center: lating, 

mapTypeld: google.maps.MapTypeld.ROADMAP 


上 

在 本 例 中 ， 将 用 户 当前 位 置 的 纬度 、 经 度 设 定 为 页 面 打开 时 Google 地 图 的 中 心 点 。 
(3) 创建 地 图 ， 并 让 其 在 页 面 中 显示 ， 代 码 如 下 所 示 。 

// 创 建 地 图 并 在 “map”div 中 显示 

var map1; 

map1= new google.maps.Map(document.getElementByld("map"), myOptions); 

本 例 中 将 地 图 显示 在 “map” 的 div 元 素 中 。 
(4) 在 地 图 上 创建 标记 ， 方 法 如 下 所 示 。 


// 在 地 图 上 创建 标记 

var marker = new google.maps.Marker({ 

position: lating, // 将 前 面 指定 的 坐标 点 标注 出 来 

map: map1 // 设 置 在 map1 变量 代表 的 地 图 中 标注 
六 


(5) 设置 标注 窗口 并 指定 标注 窗口 中 注释 文字 ， 代 码 如 下 所 示 。 
// 设 定 标注 窗口 ， 并 指定 该 窗口 中 的 注释 文字 


var infowindow = new google.maps.InfoWindow({ 
content: "我 在 这 里 
D); 


(6) 打开 标注 窗口 ， 如 下 所 示 。 
// 打 开标 注 窗口 


infowindow.open(map1, marker); 


该 程序 的 运行 效果 如 图 22.3 所 示 。 
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图 22.3 在 Google 地 图 的 上 显示 “我 在 这 里 ” 
22.4 小 结 


本 章 讨 论 了 HTML 5 Geolocation， 讲 述 了 HTML 5 Geolocation 的 位 置信 息 一 一 纬度 、 经 度 和 其 他 
特性 ， 以 及 获取 它们 的 途径 。 最 后 通过 实例 的 形式 讲解 了 在 页 面 上 使 用 Google 地 图 的 基本 方法 ， 正 确 
地 显示 Google 地 图 ， 并 且 标 注 用 户 当 前 所 在 的 地 理 位 置 等。 希望 读者 能 够 认真 地 理解 和 揣摩 HTML 5 
Geolocation 的 特性 。 


22.5 习 题 
选择 题 
1. 下 面 哪 一 项 不 是 code 的 属性 ? ( ) 
A. 用 户 拒绝 了 位 置 服务 B. 获取 不 到 位 置信 息 
C. 获取 信息 超时 错误 D. 浏览 器 不 支持 


2. getCurrentPosition 属性 中 第 三 个 参数 ， 可 用 列表 中 timeout 属性 的 作用 是 3 
A. 是 否 要 求 高 精度 的 地 理 位 置信 息 
B. 对 地 理 位 置信 息 的 获取 操作 做 一 个 超时 限制 〈 单 位 为 毫秒 ) 
C. 对 地 理 位 置信 息 进行 缓存 的 有 效 时 间 (单位 为 毫秒 》 
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D. 以 上 都 不 是 


3， 持续 获取 用 户 的 当前 地 理 位 置 的 方法 是 (  )。 
A. watchCurrentPosition B. clearWatch 
C. updatePosition D. 以 上 都 不 是 
4. 下 面 属性 中 哪 一 个 不 是 position 对 象 ? 〈 > 
A. altitude B. ongitude C. setTimeout D. heading 
判断 题 
5. message 属性 为 一 个 字符 串 。 ( ) 
填空 题 


6. 在 HTML 5 中 ， 为 window.navigator 对 象 新 增 了 一 个 属性 。 


证 
ED 


HTML 5 项 目 实 战 
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本 篇 详细 讲解 了 如 何在 一 个 用 HTML 5 语言 编写 的 网 站 中 , 综合 运用 HTML 5 
中 新 增 的 各 种 结构 元 素 ， 以 及 如 何 对 这 些 结构 元 素 综合 使 用 C55 样式 。 


.AE 


旅游 信息 网 前 合 页 面 
( 并 教学 录像 : 20 分 钟 ) 


本 章 以 一 个 旅游 信息 网 为 例 讲解 如 何 综合 运用 HTML 5 中 的 结构 元 素 。 具 体 讲 
解 时 ,会 将 实现 页 面 的 HTML5 及 C55 样式 代码 一 起 讲解 ,以 使 读者 在 学 习 的 同时 ， 
既 能 党 担 HTML 5 的 结构 元 素 在 网 页 设计 中 所 起 的 作用 ,又 能 了 解 在 HTML 5 实现 
的 网 页 中 如 何 使 用 C55 样式 来 对 页 面 中 的 元 素 进 行 页 面 布局 和 视觉 美化 。 

通过 学 习 本 章 ， 您 可 以 学 到 以 下 内 容 。 

WI 熟悉 如 何 设计 一 个 网 站 

MH ”掌握 如 何 设计 网 站 的 header 及 footer 

”掌握 如 何在 网 页 中 显示 文字 及 图 片 

MH ”掌握 如 何 设 计 网 页 导航 

WI 掌握 如 何在 网 站 播放 音乐 

”掌握 添加 留言 功能 的 实现 过 程 
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23.1 概 述 . 


本 项 目 设计 的 旅游 信息 网 是 关于 长 春 的 旅游 介绍 网 站 ， 该 网 站 主要 包括 主页 、 自 然 风 光 、 人 文 气 
息 、 美 食 、 旅 游 景 点 、 名 校 简介 及 留 下 足迹 等 页 面 。 


23.2 网 站 预览 


旅游 信息 网 由 多 个 网 页 构成 ， 下 面 看 一 下 旅游 信息 网 中 主要 页 面 的 运行 效果 。 


/ 
说 归 由 于 每 个 子 页 中 的 header 部 分 和 footer 部 分 都 是 相同 的 ， 所 以 在 下 面 浏览 各 子 页 面 的 效 
果 时 ， 主 要 演示 其 主体 部 分 的 运行 效果 。 


首页 主要 显示 旅游 信息 网 的 介绍 及 相关 图 片 ， 其 运行 效果 如 图 23.1 所 示 。 


不 新 交 好 矿 


图 23.1 应 用 HTML 5 制作 的 旅游 信息 网 的 首页 
自然 风光 页 面 主要 介绍 长 春 的 一 些 自 然 风光 ， 如 气候 、 地 理 环境 等 ， 运 行 效果 如 图 23.2 所 示 。 
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© © file/DY/AppSevw/mr/23/index-L html 


图 23.2 自然 风光 页 面 
人 文 气息 页 面 主要 是 对 长 春 市 民 的 生活 和 学 习 环 境 进行 介绍 ， 其 运行 效果 如 图 23.3 所 示 。 


€ 3 © @fleW/DyAppserv/www/mr/23/index-2html 


图 23.3 ”人文 气息 页 面 
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美食 页 面 主要 介绍 长 春 的 一 些 特色 美食 ， 其 运行 效果 如 图 23.4 所 示 。 


图 23.4 美食 页 面 
旅游 景点 页 面 主要 介绍 长 春 的 一 些 旅游 景点 ， 其 运行 效果 如 图 23.5 所 示 。 


图 23.5 旅游 景点 页 面 
名 校 简介 页 面 主 要 介绍 长 春 的 名 校 ， 其 运行 效果 如 图 23.6 所 示 。 
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/DJAppServ/www/mr/23/findex-5.html 


图 23.6 名 校 简介 页 面 


留 下 足迹 页 面 主要 是 添加 了 一 张 GIF 格式 的 图 片 ， 并 在 其 下 方 载 入 一 段 音频 文件 ， 当 打开 本 页 
时 ， 音 频 文件 将 自动 播放 。 另 外 ， 在 该 页 的 右 侧 栏 添加 了 一 张 留言 的 表单 ， 以 便 访客 留言 。 留 下 足迹 
页 面 运行 效果 如 图 23.7 所 示 。 


p 加 rdr 


© 加 fleWDyAppserv/wwwjmr/23a/index-6html 


图 23.7 留 下 足迹 页 面 
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23.3 关键 技术 


高 1 教学 录像 : 光盘 \TMNIx\23\ 关 键 技术 .exe 
23.3.1 网 站 主体 结构 设计 


旅游 信息 网 网 页 的 主体 结构 如 图 23.8 所 示 。 


header 


section 


图 23.8 旅游 信息 网 所 有 页 面 主体 结构 图 


23.3.2 ”HTML 5 结构 元 素 的 使 用 


在 设计 旅游 信息 网 前 台 页 面 时 , 主要 用 到 了 HTML 5 中 的 一 些 主体 结构 元 素 ,分别 是 header 元 素 、 
aside 元 素 、section 元 素 和 footer 元 素 。 在 大 型 的 网 站 中 ， 每 一 个 网 页 通常 都 由 这 几 个 元 素 组 成 ， 下 面 


分 别 进行 介绍 。 
加 ”header 元 素 : 通常 用 来 展示 网 站 的 标题 、 企 业 或 公司 的 logo、 广 告 (Flash 等 格式 )、 网 站 导 
航 条 等 。 


回 aside 元 素 : 通常 用 来 展示 与 当前 网 页 或 整个 网 站 相关 的 一 些 辅助 信息 。 例如, 在 博客 网 站 中 ， 
可 以 用 来 显示 博 主 的 文章 列表 和 浏览 者 的 评论 信息 等 ， 在 购物 网 站 中 ， 可 以 用 来 显示 商品 清 

单 、 用 户 信息 、 用 户 购 买 历史 等 ， 在 企业 网 站 中 ， 可 以 用 来 显示 产品 信息 、 企 业 联 系 方式 、 
友情 链接 等 。aside 结构 元 素 可 以 有 多 种 形式 ， 其 中 最 常见 的 形式 是 侧 边栏 。 

加 section 元 素 : 一 个 网 页 中 要 显示 的 主体 内 容 通常 被 放置 在 section 结构 元 素 中 ， 每 个 section 
结构 元 素 都 应 该 有 一 个 标题 显示 当前 展示 的 主要 内 容 的 标题 信息 。 每 个 section 结构 元 素 中 通 
常 还 应 该 包括 一 个 或 多 个 section 元 素 或 article 元 素 ， 用 来 显示 网 页 主体 内 容 中 每 一 个 相对 独 
立 的 部 分 。 

footer 元 素 : 通常 ， 每 一 个 网 页 中 都 具有 footer 结构 元 素 ， 用 来 放置 网 站 的 版 权 声 明和 备案 信 
息 等 与 法 律 相关 的 信息 ， 也 可 以 放置 企业 的 联系 电话 和 传真 等 联系 信息 。 

具体 设计 时 ， 在 还 没有 加 入 任何 实际 内 容 之 前 ， 这 些 网 页 代码 如 下 。 

<!IDOCTYPE html> 

<head> 
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<title> 我 爱 长 春 </title> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> 
<link rel="stylesheet" href="css/grid.css" type="text/css" media="all"> 
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> 
</head> 
<body> 
<header> </header> 
<section id="content"> 
<article></article> 
</section> 
<aside></aside> 
<footer></footer> 
</body> 
</html> 


/ 

培 明 上 面 代码 中 ， 页 面 开头 使 用 了 HTML 5 中 的 “<IDOCTYPE html>” 语 句 来 声明 页 面 中 将 
使 用 HTML 5 语言 。 在 <head> 标签 中 ,除了 <meta> 标 签 中 使 用 了 更 简洁 的 编码 指定 方式 之 外 ,其 他 
代码 均 与 HTML 4 中 的 <head> 标 签 中 的 代码 一 致 .此 页 面 中 使 用 了 很 多 结构 元 素 , 用 来 替代 HTML 4 
中 的 div 元素 ， 因 为 div 元 素 没 有 任何 语义 性 ， 而 HTML 5 中 推荐 使 用 具有 语义 性 的 结构 元 素 ， 这 
样 做 的 好 处 就 是 可 以 让 整个 网 页 结构 更 加 清晰 。 浏览 器 、 屏 幕 阅读 器 以 及 其 他 阅读 此 代码 的 人 也 可 
以 直接 从 这 些 元 素 上 分 析出 网 页 中 什么 位 置 放置 了 什么 内 容 。 


23.4 ”网 站 公共 部 分 设计 


锅 4 教学 录像 : 光盘 \TM\Ix\23\ 网 站 公共 部 分 设计 .exe 
在 本 网 站 的 网 页 中 ， 有 两 个 公共 的 部 分 ， 分 别 是 header 元 素 中 的 内 容 和 footer 元 素 中 的 内 容 。 这 
两 部 分 是 本 网 站 每 个 页 面 中 都 包含 的 内 容 ， 下 面具 体 介绍 一 下 这 两 个 公共 部 分 的 主要 内 容 。 


23.4.1 设计 网 站 公共 header 


header 元 素 是 一 个 具有 引导 和 导航 作用 的 结构 元 素 ， 很 多 企业 网 站 中 都 有 一 个 非常 重要 的 header 
元 素 ， 一 般 位 于 网 页 的 开头 ， 用 来 显示 企业 名 称 、 企 业 logo、 整 个 网 站 的 导航 条 ， 以 及 Flash 形式 的 广 
告 条 等 。 

在 本 网 站 中 ，header 元 素 中 的 内 容 包 括 : 网 站 的 logo、 网 站 的 导航 以 及 通过 jQuery 技术 来 循环 显 
示 的 特色 图 片 ， 同 时 还 为 这 些 图 片 添 加 了 说 明 性 关键 字 。header 元 素 中 的 内 容 在 浏览 器 中 的 显示 结果 
如 图 23.9 所 示 。 
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图 23.9 旅游 信息 网 header 元 素 在 浏览 器 中 的 显示 
网 站 公共 部 分 的 header 元 素 的 结构 示意 图 ， 如 图 23.10 所 示 。 


<div>logo</div> | <nav> 网 站 导航 </nav> 


<div> 图 片 </div> 


图 23.10 ”公共 部 分 header 元 素 的 结构 示意 图 


1，header 元 素 中 显示 网 站 名 称 的 代码 分 析 
在 div 中 存放 网 站 的 名 称 及 logo， 它 在 浏览 器 中 的 页 面 显示 如 图 23.11 所 示 。 


图 23.11 网 站 logo 及 名 称 的 显示 
div 元 素 主要 是 显示 页 面 左边 的 logo， 同 时 通过 <h2>...</h2> 显 示 网 站 的 名 称 “ 我 爱 长 春 ”， 并 通 
过 <strong> 属 性 对 “长 春 ” 两 个 字 进行 了 加 粗 .其 实现 的 代码 如 下 。( 实 例 位 置 :光盘 \TMNsI\23\index.html) 


<div class="logo"> 
<h2> 我 爱 <strong> 长 春 </strong> </h2> 
</div> 


接 下 来 看 一 下 对 网 站 logo 实现 CSS 样式 的 设计 ,代码 如 下 。.( 实 例 位 置 :光盘 \TM\sl\23\ess\style.css) 


header .logo { 
position:absolute; 
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left:45px; 

top:70px; 

background:url(../images/logo.png) no-repeat 0 0; 
padding:20px 0 0 20px; 

width: 156px; 


header .logo h1{ 
font-size:38px; 
line-height:1.2em; 
color:#c3c3c3; 
font-weight:normal; 
font-style:italic; 
letter-spacing:-1px; 
b 
header .logo h1a{ 
color:#c3c3c3; 
text-decoration:none; 


} 
header .logo h1 a strong { 
color:#fff; 


} 
上 面 的 CSS 代码 的 主要 作用 如 下 。 
加 ”对 header 元 素 中 logo 整体 样式 的 设计 ,其 中 包括 添加 logo 的 图 片 、 设 置 补 白 像素 值 . 设 置 logo 
回 ”设置 网 站 名 称 的 字体 大 小 、 字 体 风格 为 斜体 、 字 体 加 粗 、 字 体 颜色 等 。 
2. header 元 素 中 nav 元 素 的 代码 分 析 


nav 元 素 是 一 个 可 以 用 作 页 面 导 航 的 链接 组 , 其 中 的 导航 元 素 链 接 到 其 他 页 面 页 面 的 其 他 部 
分 。nav 元 素 可 以 被 放置 在 header 元 素 中 ， 作 为 整个 网 站 的 导航 条 来 使 用 。nav 元 素 中 可 以 存放 列表 或 
导航 地 图 ， 或 其 他 任何 可 以 放置 一 组 超 链接 的 元 素 。 在 本 网 站 中 ， 网 站 标题 部 分 的 nav 元 素 中 放置 了 
一 个 导航 地 图 ， 如 图 23.12 所 示 。 


图 23.12 应 用 nav 元素 实现 的 网 站 导航 条 
header 元 素 中 应 用 到 的 nav 元 素 的 代码 如 下 。 (实例 位 置 : 光盘 \TMNsI\23\indexhtml) 


<nav> 
<ul> 
<li><a href="index.html" class="current"> 主 页 </a></li> 
<li><a href="index-1.htmI"> 自 然 风光 </a></li> 
<li><a href="index-2.html"> 人 文 气息 </a></li> 
<li><a href="index-3.htmI"> 美 食 </a></li> 
<li><a href="index-4.html"> 旅 游 景点 </a></li> 


413 


HTML 5 从 入 门 到 精通 


<li><a href="index-5.html"> 名 校 简介 </a></li> 

<li><a href="index-6.html"> 留 下 足迹 </a></li> 
</ul> 
</nav> 


接 下 来 看 一 下 nav 元 素 所 使 用 到 的 样式 代码 ， 其 代码 如 下 所 示 。 《实例 位 置 : 光盘 \TMNsI\23\ess\ 


style.css) 


header nav{ 
position:absolute; // 采 用 绝对 定位 来 设 定 浏览 器 定位 HTML 元 素 
right:25px; 
top:97px; 
} 
header nav ul li{ 
float:left; 
padding-left:6px; // 右 侧 补 白 值 为 6 像素 
0 
header nav ullia{ 
float:left; // 让 内 容 右 包 围 一 个 元 素 
color:#fff; 
text-decoration:none; // 文 本 不 加 任何 下 划 线 、 上 划 线 和 删除 线 
width:80px; 
text-align:center; // 文 本 居中 对 齐 
line-height:31px; /文本 的 行 高 设置 为 31 像素 
font-size:14px; /将 字体 大 小 设置 成 14 像素 
} 


header nav ul li a:hover, 
header nav ul li a.current { 
background:url(../images/nav-bg.gif) 0 0 repeat-x; 。 // 设 置 导航 条 的 背景 图 片 ， 并 水 平平 铺 
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 


} 
上 面 的 CSS 代码 的 主要 作用 如 下 。 
设 定 HTML 元 素 在 浏览 器 中 的 定位 采用 的 是 绝对 定位 ， 同 时 设 定 导航 条 上 边 距 与 左边 距 的 位 置 。 
回 ”对 导航 的 列表 块 进 行 设置 ， 主 要 是 对 右 侧 进行 补 白 。 
对 列表 内 导航 文字 进行 设置 ， 主 要 是 设置 字体 的 大 小 、 颜 色 、 文 字 的 对 齐 方式 等 。 
回 ”添加 导航 的 背景 图 片 ， 并 水 平平 铺 显 示 。 
3. header 元 素 中 显示 宣传 图 片 代码 分 析 
接 下 来 ， 看 一 下 在 header 元 素 中 显示 宣传 图 片 ， 这 些 宣传 图 片 被 放置 在 div 元 素 中 ， 该 元 素 中 放 


置 3 


字 ， 
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张 图 片 ， 并 通过 jQuery 技术 循环 播放 这 3 张 图片 ， 同 时， 在 宣传 图 片 的 右 侧 显示 对 应 的 说 明 性 文 
这 些 文字 的 显示 是 以 列表 形式 出 现 的 。 宣传 图 片 在 浏览 器 中 显示 的 结果 如 图 23.13 所 示 。 
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图 23.13 通过 jQuery 技术 在 header 元 素 中 实现 图 片 的 循环 播放 


实现 的 主要 代码 如 下 。《〈 实 例 位置 : 光盘 \TMNsI\23\index.html) 
<div class="rap"> 
<a href="#"><img src="images/big-img1.jpg" alt="" width="571" height="398"></a> 
<a href="#"><img src="images/big-img2.jpg" alt="" width="571" height="398"></a> 
<a href="#"><img src="images/big-img3.jpg" alt="" width="571" height="398"></a> 
</div> 
<ul class="pagination"> 
<li> 
<a href="#" rel="0"> 
<img src="images/f_thumb1.png" alt=""> 
<span class="|left"> 
北国 风光 <br/> 
万 里 雪 飘 <br/> 
</span> 
<span class="right"> 
堆 雪人 <br/> 
溜 疏 犁 <br/> 
</span> 
</a> 
</li> 
<li> 
<a href="#" rel="1"> 
<img src="images/f_thumb2.png" alt="> 
<span class="left"> 
净 月 潭 <br/> 
33568 平方 米 <br/> 
樟 子 松 
</span> 
<span class="right"> 
夏 避暑 <br/> 
秋 赏 时 <br> 
冬 玩 雪 
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</span> 
</a> 
</li> 
<li> 
<a href="#" rel="2"> 
<img src="images/f_thumb3.png" alt="> 
<span class="left"> 
伪 满 洲 国 <br/> 
红色 旅游 <br/> 
跑马 场 
</span> 
<span class="right"> 
中 和 门 <br/> 
同 德 殿 <br/> 
怀远 楼 
</span> 
</a> 
</li> 
</ul> 


宣传 图 片 所 使 用 的 样式 代码 如 下 。〔 实 例 位置 ， 光盘 \TM\sl\23\ess\style.css) 


#faded { 
position:absolute; 
left:0; 
top:161px; 
padding-bottom:20px; 

} 

#faded .rap { 
background:url(../images/img-wrapper-bg.jpg) no-repeat 50% 0 #d92400; 
border:1px solid #e46b00; 
width:589px; 
height:416px; 
border-radius:8px; 

-moz-border-radius:8px; 
-webkit-border-radius:8px; 
box-shadow:-2px 8px 5px rgba(0, 0, 0, .6); 
-moz-box-shadow:-2px 8px 5px rgba(0, 0, 0, .6); 
-webkit-box-shadow:-2px 8px 5px rgba(0, 0, 0, .6); 
z-index:10; 
overflow:hidden; 
b 
#faded .rap img { 

margin:9px 0 0 9px; 

} 


#faded ul.pagination { 
position:absolute; 
left:537px; 
top:10px; 
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background:url(../images/pagination-splash.gif) no-repeat 0 0 #2a2a2a; 


border:1px solid #3a3a3a; 
border-radius:8px; 
-moz-border-radius:8px; 
-webkit-border-radius:8px; 
box-shadow:-2px 8px 5px rgba(0, 0, 0, .4); 
-moz-box-shadow:-2px 8px 5px rgba(0, 0, 0, .4); 
-webkit-box-shadow:-2px 8px 5px rgba(0, 0, 0, .4); 
z-index:9; 
padding:25px 0 25px 0; 
上 } 
#faded ul.pagination li { 
width:429px; 
position:relative; 
background:url(../images/line-bot.gif) no-repeat 77px 100%; 
padding-bottom:1px; 
height:1%; 
} 
#faded ul.pagination li:last-child { 
background:none; 
} 
#faded ul.pagination lia { 
display:block; 
padding:16px 40px 14px 77px; 
overflow:hidden; 
color:#7f7f7f; 
text-decoration:none; 
font-size: 13px; 
line-height:28px; 
height:1%; 
cursor:pointer; 
-moz-transition: all 0.3s ease-out; /* FF3.7+*/ 
-0-transition: all 0.3s ease-out; /* Opera 10.5*/ 
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ 
1 
#faded ul.pagination li a:hover, #faded ul.pagination li.current a{ 
background-color:#1d1d1d; 
color:##fff, 
} 
#faded ul.pagination lia img { 
float:left; 
margin-right:28px; 
} 
#faded ul.pagination lia span.left { 
float:left; 
‘width:100px; 
} 
#faded ul.pagination lia span.right { 
float:left; 
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width:80pxi; 
} 
上 面 的 CSS 代码 的 主要 作用 如 下 。 
设置 放置 图 片 位 置 ， 距 上 边框 161 像素 ， 并 在 底部 进行 补 白 。 
设置 图 片 的 背景 色 为 红色 、 设 置 图 片 的 边框 为 1 像素 、 设 置 图 片 的 宽度 与 高 度 、 将 图 片 的 层 
又 顺序 属性 设 为 整数 10， 表 示 图 片 覆盖 其 背景 、 将 图 片 超出 背景 的 部 分 隐藏 。 
加 ”设置 该 列表 的 样式 包括 : 列表 的 背景 图 像 、 列 表 的 宽度 、 列 表 的 层 肥 顺序 属性 设 为 整数 9, 表 
示 列 表 与 图 片 重 全 部 分 将 被 图 片 履 盖 。 
回 ”设置 列表 项 的 样式 ,将 列表 项 的 定位 方式 设置 为 relative， 表 示 采 用 相对 定位 ， 对 象 不 可 层 登 ， 
但 是 将 依据 left、right、top、bottom 等 属性 设置 在 页 面 中 的 偏 移 位 置 。 
设置 列表 项 内 文字 和 缩小 图 片 的 样式 ， 首 先 将 display 的 属性 设置 为 block， 表 示 块 对 象 的 默 
认 值 。 将 对 象 强制 作为 块 对 象 呈 递 ， 为 对 象 之 后 添加 新 行 。 设 置 新 行 的 填充 像素 、 设 置 列表 
项 内 文字 的 大 小 及 样式 。 设 置 缩 小 图 片 与 文字 排列 的 位 置 。 


23.4.2 ”设计 网 站 公共 footer 


footer 元 素 专 门 用 来 显示 网 站 、 网 页 或 内 容 区 块 的 脚注 信息 ， 在 企业 网 站 中 的 footer 结构 元 素 通常 
来 显示 版 权 声明 、 备 案 信 息 、 企 业 联 系 电话 及 网 站 制作 单位 等 内 容 。 
本 网 站 页 面 的 footer 元 素 在 浏览 器 中 的 显示 结果 如 图 23.14 所 示 。 


版 权 所 有 : 吉林 省 明日 科技 有 限 公 司 地址: 


图 23.14 ”通过 footer 元 素 实现 的 网 站 版 权 说 明 


footer 元 素 中 的 内 容 相对 来 说 比较 简单 ， 它 存放 了 两 个 div 元 素 ， 其 中 上 面 的 div 元 素 仅 用 来 设置 
footer 的 样式 的 类 名 为 container 16， 第 二 个 div 元 素 中 存放 版 权 信息 、 公 司 地 址 、 公 司 电话 等 。 其 实 
现 的 主要 代码 如 下 。〔 实 例 位 置 ， 光盘 \TMIsl\23\index.html) 


<footer> 
<div class="container_16"> 
<div id="main"> 
版 权 所 有 : <strong> 吉 林 省 明日 科技 有 限 公司 </strong>&nbsp;&nbsp;&nbsp; 
地 址 : 长 春 市 二 道 区 东 盛 大 街 89 号 亚 泰 广场 C 座 2205 室 &nbsp;&nbsp;&nbsp; 
电话 : 400-675-1066 
</div> 
</div> 
</footer> 


footer 元 素 所 使 用 的 CSS 样式 代码 如 下 。〔 实 例 位 置 ， 光 担 \TM\sl\23\ess\style.css) 


footer .container_16{ 
font-size:.625em; 
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footer .copy { 

b 

footer .copy span { 
text-transform:uppercase; 
color:#e1e1e1; 


footer .copya{ 


Color:#777; 
} 


23.5 网 站 主页 设计 
区 教学 录像 : 光盘 VTMNIx\23\ 网 站 主页 设计 .exe 
23.4 节 介 绍 了 旅游 信息 网 的 公共 部 分 ， 本 节 将 对 如 何 使 用 HTML 5 结构 元 素 设置 网 站 主页 进行 详 
细 讲 解 。 
23.5.1 显示 网 站 介绍 及 相关 图 片 


在 HTML 5 网 站 中 ， 每 个 网 页 所 展示 的 主体 内 容 通常 都 存放 在 section 结构 元 素 中 ， 而 且 通常 都 带 
有 一 个 标题 元 素 header。 在 主页 中 ， 网 站 介绍 及 相关 图 片 的 显示 结果 如 图 23.15 所 示 。 


万达 下 思 欣 


图 23.15 网 站 介绍 及 相关 图 片 的 显示 
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在 主页 中 ， 页 面 主体 section 元 素 中 显示 了 长 奉 的 简介 ， 以 及 一 些 美丽 的 图 片 ， 其 结构 相对 来 说 比 


较 简单 ， 主 要 是 通过 aside 元 素 组 成 的 。 主 页 中 的 section 元 素 内 容 的 代码 如 下 。 《实例 位 置 : 光盘 \ 
TM™\sl\23\index.html) 


<section id="mainContent" class="grid_10"> 
<article> 
<h2> 长 春 欢迎 你 </h2> 
<h3> 长 春 ， 吉 林 省 省 会 ， 全 省 政治 、 经 济 、 文 化 和 交通 中 心 ， 中 国 最 大 的 汽车 工业 城市 ， 有 “东方 
底特律 ”之 称 。 中 国 建成 区 面积 和 建成 区 人 口 第 九 大 城市 。 中 国 特大 城市 之 一 。</h3> 
<h4> 长 春 地 处 东北 平原 中 央 ， 是 东北 地 区 天 然 地 理 中 心 ， 东 北 亚 几 何 中 心 ， 东 北 亚 十 字 经 济 走廊 核 
心 。 总 面积 20604 平方 公里 。</h4> 
<p> 新 的 长 春 ， 宛 若 一 颗 镶 嵌 在 中 国 东 北平 原 腹地 的 明珠， 在 二 百 余年 近代 城市 历史 的 发 展 变化 中 ， 
以 其 年 轻 而 美 丽 跻身 于 国内 特大 城市 之 列 ! 而 已 经 淹没 的 长 春 古代 历史 又 像 是 饱 经 风霜 的 老者 ， 讲 述 这 里 曾经 的 
跌跌撞撞 、 大 起 大 落 、 大 喜 大 翡 。 从 古都 到 新 城 ， 悠 远 和 年 轻 这 两 种 不 同 的 力量 ， 都 注定 了 长 春 必 定 辉煌 ! </p> 
<a href="#" class="button"> 更 多 </a> 
</article> 
<article class="last"> 
<h2> 魅 力 长 春 </h2> 
<h5> 长 春 素 有 “汽车 城 ”、“ 电 影 城 ”、“ 光 电 之 城 ”、“ 科 技 文化 城 ”、“ 大 学 之 城 ”、“ 森 林 
城 ”、“ 有 雕塑 城 ” 的 美誉 ， 是 中 国 汽车 、 电 影 、 光 学 、 生 物 制药 、 轨 道 客车 等 行业 的 发 源 地 。</h5> 
<ul class="img-list clearfix"> 
<li><a href="#"><img src="images/thumb1.jpg" alt="></a></li> 
<li><a href="#"><img src="images/thumb2.jpg" alt=""></a></li> 
<li><a href="#"><img src="images/thumb3.jpg" alt="></a></li> 
<li><a href="#"><img src="images/thumb4.jpg" alt="></a>< 川 > 
<li><a href="#"><img src="images/thumb5,jpg" alt="></a></li> 
<li><a href="#"><img src="images/thumb6.jpg" alt=""></a></li> 
<li><a href="#"><img src="images/thumb7.jpg" alt="></a></li> 
<li><a href="#"><img src="images/thumb8.jpg" alt=""></a></li> 
<li><a href="#"><img src="images/thumb9.jpg" alt=""></a></li> 
</ul> 
<a href="#" class="button"> 更 多 </a> 
</article> 
</section> 


第 一 个 <article> 显 示 了 关于 长 春 的 介绍 性 文字 ,其 主要 是 通过 标题 文字 标记 的 使 用 , 来 达到 文字 的 


层次 效果 。 第 二 个 <article> 显 示 了 关于 长 春 的 荣誉 称号 ， 并 通过 列表 的 形式 来 展示 图 片 ， 以 使 得 文字 内 


容 更 具有 说 服 力 ， 页 面 显 示 效 果 更 加 美观 。 
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上 面 section 元 素 所 使 用 的 CSS 样式 代码 如 下 。 (实例 位 置 : 光盘 \TMINsI\23\ess\style.ess) 


#mainContent article { 
padding:0 0 32px 0; 
margin-bottom:30px; 
border-bottom:1px dashed #323232; 
b 


#mainContent article.last { 
padding-bottom:0; 
margin-bottom:0; 
border:none; 


} 
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23.5.2 ”主页 左 侧 导 航 的 实现 


aside 元 素 用 来 显示 当前 网 页 主体 内 容 之 外 的 、 与 当前 网 页 显示 内 容 相关 的 一 些 辅助 信息 。 例 如 ， 
可 以 是 一 些 关 于 网 站 的 宣传 语 ， 或 者 是 网 站 管理 者 认为 比较 重要 的 信息 。aside 元 素 的 显示 形式 可 以 是 
多 种 多 样 的 ， 其 中 最 常用 的 形式 是 侧 边栏 的 形式 。 在 主页 中 的 aside 元 素 内 应 用 到 两 个 article 元 素 ， 一 
个 article 元 素 用 以 显示 对 长 春 一 些 特点 的 概述 ， 当 单 击 这 些 概 述 的 文字 时 ， 将 以 定义 列表 的 形式 ， 对 
这 些 概述 的 文字 进行 解释 ， 另 外 一 个 article 元 素 显 示 一 张 长 春 区 域 的 地 图 ， 并 在 图 片 的 下 方 对 各 区 的 
名 称 进行 链接 。 主 页 左 侧 导 航 在 浏览 器 中 的 效果 如 图 23.16 所 示 。 


图 23.16 主页 左 侧 导航 
主页 中 的 aside 元 素 的 代码 如 下 。〔 实 例 位 置 光盘 \TM\sI\23\index.html) 


<aside class="grid_6"> 
<div class="prefix_1"> 
<article> 
<div class="box"> 
<h2> 长 春 美誉 </h2> 
<dl class="accordion"> 
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<dt><img src="images/icon1.gif" alt="><a href="#"> 汽 车 城 </a></dt> 
<dd> 中 国 第 一 汽车 集团 公司 是 中 国 最 大 的 汽车 工业 科研 生产 基地 ， 汽 车 产量 占 全 国 总 产量 的 
五 分 之 一 </dd> 
<dt><img src="images/icon2.gif" alt="><a href="#'> 电 影 城 </a></dt> 
<dd> 长 春 电影 制 片 厂 是 新 中 国电 影 事 业 的 “摇篮 ”， 为 弘扬 电影 文化 ， 长 春 市 政府 自 1992 年 
以 来 ， 每 两 年 举办 一 届 长 春 电影 节 ， 邀 请 国内 外 电影 界 知名 人 士 和 电影 厂商 汇聚 长 春 ， 共 创 电 影 辉 煌 </dd> 
<dt><img src="images/icon3.gif" alt="><a href="#"> 光 电 城 </a></dt> 
<dd> 在 光学 电子 、 激 光 技术 、 高 分 子 材料 、 生 物 工程 等 方面 的 研究 居 全 国 领先 地 位 ， 有 的 已 
经 达到 国际 先进 水 平 </dd> 
<dt><img src="images/icon4.gif" alt="><a href="#"> 雕 塑 城 </a></dt> 
<dd> 长 春 雕 塑 公园 </dd> 
<dt><img src="images/icon5.gif" alt="><a href="#"> 森 林 城 </a></dt> 
<dd> 著 名 的 净 月 潭 森林 旅游 区 总 面积 478.7 平方 公里 ， 有 亚洲 最 大 的 人 工 森 林 </dd> 
</dl> 
</div> 
</article> 
<article class="|last"> 
<h2> 长 春 地 图 </h2> 
<p><img src="images/map.jpg" alt="></p> 
<div class="wrapper"> 
<ul class="list1 grid_3 alpha"> 
<li><a href="#'> 农 安 市 </a></li> 
<li><a href="#"'> 德 惠 市 </a></li> 
<li><a href="#"> 九 台 市 </a></li> 
</ul> 
<ul class="list1 grid_2 omega"> 
<li><a href="#"> 长 春 市 区 </a></li> 
<li><a href="#'> 榆 树 市 </a></li> 
</ul> 
</div> 
</article> 
</div> 
</aside> 


其 中 ， 对 目录 列表 实现 的 下 拉 式 显示 ， 是 通过 JavaScript 脚本 与 jQuery 脚本 来 实现 的 ， 具 体 的 实 
现代 码 如 下 。《〔 实 例 位 置 ， 光 盘 \TM\sl\23\index.html) 


<script type="text/javascript"> 
S$(function(}{ 
$(".accordion dt").toggle(function(X{ 
S(this).next().slideDown(); 
}, function(){ 
S(this).next().slideUp(); 


»); 
了 
</script> 
<script type="text/javascript"> Cufon.now(); </script> 


下 面 ， 再 来 看 一 下 首页 中 aside 元 素 所 使 用 的 样式 ， 其 实现 代码 如 下 。【〔 实 例 位 置 ， 光盘 \ 


422 


第 23 章 旅游 信息 网 前 台 页 面 


T™\sl\23\css\style.css) 


aside article { 
padding-bottom:0; 
margin-bottom:35px; 
} 

aside article.last { 
margin-bottom:0; 

} 
/* Accordion */ 
.accordion dt { 
font-size:16px; 
line-height:1.2em; 
color:#000; 
position:relative; 
padding:10px 0 Spx 40px; 
height:1%; 
| 
.accordion dt img { 
position:absolute; 
left:0; 
top:10px; 
) 

.accordion dta{ 
color:#000; 
} 

.accordion dd { 
display:none; 
padding:0 0 0 40px; 

} 

Lists */ 

list1 li{ 
background:url(../images/arrow1.gif) no-repeat 0 7px; 
padding:0 0 6px 15px; 
font-size:13px; 
zoom:1; 

b 

listi lia { 
color:#fff; 
font-weight:bold; 
} 


上 面 CSS 代码 的 主要 作用 如 下 。 


回 ”对 aside 元 素 中 的 article 元 素 样式 进行 设置 ， 其 主要 是 设置 其 边 距 和 填充 的 像素 。 
阿 ”设置 定义 列表 项 的 样式 ， 主 要 是 设置 列表 项 的 字体 、 高 度 、 颜 色 、 定 位 方式 以 及 列表 项 前 


的 图 标 等 。 


母 
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23.6 ” 留 下 足迹 页 面 设计 


名 教学 录像 : 光盘 \TM\Ix\23\ 留 下 足迹 页 面 设计 .exe 
在 “ 留 下 足迹 ”页 面 中 ， 除 了 添加 了 公共 部 分 的 header 和 footer 外 ， 还 借助 section 元 素 和 aside 
元 素 实现 了 播放 音乐 和 添加 留言 的 功能 ， 本 节 就 对 如 何 设 计 并 实现 留 下 足迹 页 面 进行 详细 讲解 。 


23.6.1 ”播放 音乐 


留 下 足迹 页 面 的 主体 内 容 相对 来 说 比较 简单 ， 主 要 是 添加 了 一 张 GIF 格式 的 图 片 ， 选 择 添加 GIF 格 
式 的 图 片 ， 是 因为 其 能 “ 闪 动 ”， 从 而 使 整个 页 面 显得 更 生动 。 在 该 图 片 的 下 方 ， 通 过 audio 标签 加 载 
了 一 段 音 频 ， 并 将 其 设置 为 自动 播放 ， 这 样 当 进 入 这 个 网 页 的 时 候 ， 不 但 可 以 看 到 美丽 的 画面 ， 还 可 以 
听 到 一 首 好 听 的 歌曲 。 当然 , 读者 也 可 以 通过 设置 背景 音乐 的 形式 , 达到 以 上 效果 。 但 是 为 了 显示 HIML5 
的 强大 功能 , 这 里 使 用 了 audio 标签 来 加 载 音 频 。 当 然 更 好 的 办 法 是 直接 通过 video 标签 , 加 载 一 段 视频 ， 
这 样 整个 页 面 的 效果 会 更 加 绚丽 。“ 留 下 足迹 ”页 面 中 的 播放 音乐 功能 的 效果 如 图 23.17 所 示 。 


图 23.17 留 下 足迹 页 面 的 播放 音乐 功能 
播放 音乐 功能 的 实现 代码 如 下 。〔 实 例 位 置 ， 光盘 \TM\sl\23\index-6.html) 


<section id="mainContent" class="grid_10"> 
<article> 
<h2> 雪 景 </h2> 
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<img src="images/7page-img1.gif" alt="" width="600"> 
<h2> 听 一 首 关 于 雪 的 歌曲 </h2> 
<audio src="music/xr.mp3" controls="controls” autoplay="autoplay" ></audio> 
</article> 
</section> 


23.6.2 ”添加 留言 功能 的 实现 


在 留 下 足迹 页 面 中 ， 使 用 aside 元 素 实现 了 添加 留言 的 功能 ， 其 运行 效果 如 图 23.18 所 示 。 
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图 23.18 添加 留言 功能 
使 用 aside 元 素 实现 添加 留言 功能 的 主要 代码 如 下 。 (实例 位 置 : 光盘 \TMIsI\23\index-6.html) 


<form action="" id="contacts-form"> 

<label><span> 姓 名 : </span><input type="text" /></label> 

<label><span>E-mail: </span><input type="text" /></label> 

<span> 留 言 : </span><textarea></textarea></div> 

<a href="#" onclick="document.getElementByld('contacts-form').submit()" class="button"> 提 交 </a> 
<a href="#" onclick="document.getElementByld('contacts-form').submit()" class="button"> 重 置 </a></div> 
</form> 


下 面 再 来 看 一 下 对 表单 样式 设计 的 代码 。〈 实 例 位 置 ， 光盘 \TM\sI23\ess\style.css) 


#contacts-form fieldset { 
border:none; 


a 
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} 

#contacts-form label { 
display:block; 
height:26px; 
overflow:hidden; 

} 

#contacts-form span { 
float:left; 
width:66px; 

) 

#contacts-form input { 
float:left; 
background:#1e1e1e; 
border:1px solid #a4a4a4; 
width:210px; 
padding:1px 5px 1px Spx; 
Color:##fff; 

} 

#contacts-form textarea { 
float:left; 
width:210px; 
padding:1px 5px 1px 5px; 
height:195px; 
background:#1e1e1e; 
border:1px solid #a4a4a4; 
overflow:auto; 
color:#fff; 

} 

#contacts-form .button { 
float:right; 
margin-left:16px; 
margin-top:14px; 
| 


NO 
说 明 请 使 用 最 新 的 Google Chrome 浏览 器 运行 本 章 的 旅游 信息 网 ， 该 网 站 只 是 一 个 前 台 展示 
页 面 ， 故 所 有 的 链接 都 为 空 链接 。 读者 可 以 自行 开发 本 站 的 后 台 程序 , 最 终 实现 前 台 与 后 台 的 交互 。 


23.7 小 


本 章 使 
掌握 常用 的 HTML 5 结构 元 素 的 使 用 方法 ， 并 能 够 使 
前 台 网 页 。 
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结 


ba 


HTML 5 结合 CSS 样式 文件 制作 了 一 个 旅游 信息 网 ， 通 过 对 本 章 的 学 习 ， 读 者 应 该 能 够 


这 些 结构 元 素 ， 结 合 CSS 样式 文件 制作 简单 的 
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